Le Guide Angular
  • Le Guide Angular par Wishtack
  • Pourquoi Angular ?
  • ECMAScript 6+
    • Un Peu d'Histoire
    • Propriétés du Langage
    • "Single-Threaded" donc Asynchrone
    • Classes
    • Hoisting is Dead: var vs. let vs. const
    • this & "binding"
    • Arrow Functions
    • Template Strings
    • Syntactic Sugar
      • Spread
      • Destructuring
      • Rest
      • Object Literal Property Value Shorthand
    • Named Parameters
    • Compatibilité
  • TypeScript
    • Pourquoi TypeScript ?
    • De l'ECMAScript au TypeScript
    • Visibilité des Propriétés
    • Typing des Propriétés
    • Types
    • Interfaces
    • Inference
    • Duck Typing
    • Duck Typing Patterns
      • Compatibilité de Librairies
      • Entity Constructor
    • Décorateurs
      • Décorateurs de Propriété
      • Décorateurs de Classe
      • Décorateurs de Méthode & Paramètres
    • Quelques Liens
  • Tools
    • Git
    • Command Line
    • NodeJS
    • NPM
    • Yarn
      • Pourquoi Yarn ?
      • Définition et Installation des Dépendances
      • Scripts
      • Mise à Jour et Automatisation
    • Chrome
    • IntelliJ / WebStorm / VSCode
      • Raccourcis clavier IntelliJ / WebStorm
    • Floobits
    • Angular CLI
    • StackBlitz
    • Compodoc
  • Angular
    • Bootstrap
    • Composants
      • Root Component
      • Template Interpolation
      • Property Binding
      • Class & Style Binding
      • Event Binding
      • *ngIf
      • *ngFor
      • L'approche MVC
      • Création de Composants
      • Exemple
    • Container vs. Presentational Components
    • Interaction entre Composants
      • Input
      • Output
      • Exemple
    • Change Detection
      • Les Approches Possibles
      • Fonctionnement de la Change Detection
      • Optimisation de la Change Detection
      • Immutabilité
      • Quelques Liens
    • Project Structure & Modules
      • Entry Point
      • Définition d'un Module
      • Root Module
      • Feature Module
      • Shared Module
      • Exemple
    • Dependency Injection
      • Qu'est-ce que la "Dependency Injection" ?
      • Injection d'un Service Angular
      • Services & Providers
      • Portée des Services
      • Tree-Shakable Services
      • Class vs Injection Token
      • Exemple
    • Callback Hell vs. Promise vs. Async / Await
      • Callback Hell
      • Promise
      • Async / Await
    • Observables
      • Reactive Programming
      • Promise vs Observable
      • Subscribe
      • Unsubscribe ⚠️
      • Création d'un Observable
      • Opérateurs
        • Définition d'un Opérateur
        • Lettable Operators vs Legacy Methods
        • map
        • filter
        • mergeMap & switchMap
        • shareReplay
        • buffer
        • debounceTime
        • distinctUntilChanged
        • retry
      • Quelques Liens
    • Http
      • Pourquoi HttpClient ?
      • Utilisation de HttpClient
      • Utilisation dans un Service
      • Gestion de la Subscription ⚠️
    • GraphQL
    • Formulaires
      • Template-driven Forms 🤢
      • Reactive Forms 👍
        • Avantages des "Reactive Forms"
        • La boite à outils des "Reactive Forms"
        • Validation
        • Observation des Changements
    • Directives
      • Attribute Directive
      • Structural Directive
    • Pipes
    • Routing
      • Mise en Place du Routing
      • Lazy Loading
      • Project Structure
      • Route Guards
    • Testing
      • Unit-Testing
        • Jasmine
        • Unit-Test Synchrone
        • Test-Driven Development
        • Unit-Test Asynchrone
        • TestBed
        • Unit-Test d'un Service
        • Unit-Test d'un Composant
        • Unit-Test et Spies
        • Unit-Test et HttpClient
      • End-to-End
    • Sécurité
      • Quelques Liens
    • Animation
    • Internationalisation
    • Quelques Liens
  • Cookbook
    • Authentification et Autorisation
Powered by GitBook
On this page
  • 1. Event Binding
  • 2. Déclaration de la propriété et décorateur @Output()
  • 3. Initialisation de la propriété avec EventEmitter
  • 4. Emission de valeurs

Was this helpful?

  1. Angular
  2. Interaction entre Composants

Output

PreviousInputNextExemple

Last updated 5 years ago

Was this helpful?

1. Event Binding

De la même façon que les permettent de communiquer des données à un "child component", ce dernier peut transmettre des données au "parent component" via un mécanisme d'"Output" similaire à l' utilisé précédemment pour capturer des événements natifs.

<wt-book-preview (rate)="onRate($event)"></wt-book-preview>

Nous avons inscrits l'expression onRate($event) comme "listener" de l'événement rate.

bookPreviewComponent.rate
    .subscribe((rating) => {
        this.onRate(rating);
    });

Remarquez la similarité avec l' sur des événements DOM.

<button (click)="buy()">BUY</button>
<div (drop)="onDrop($event)"></div>
button.addEventListener('click', () => this.buy());
div.addEventListener('drop', (dropEvent) => this.onDrop(dropEvent));

Contrairement aux , si l'"output" n'est pas déclaré correctement, Angular ne produira aucune erreur. Dans ce cas, Angular inscrit notre "listener" à un événement DOM qui n'existe pas et qui ne se produit donc jamais ; notre "listener" ne sera alors simplement jamais appelé.

2. Déclaration de la propriété et décorateur @Output()

En déclarant simplement la propriété rate sur le composant book-preview :

...
export class BookPreviewComponent {
    rate;
}
import { Output } from '@angular/core';

...
export class BookPreviewComponent {
    @Output() rate;
}

... et nous remarquons alors une erreur très intéressante :

TypeError: Cannot read property 'subscribe' of undefined

3. Initialisation de la propriété avec EventEmitter

Il faut donc initialiser la propriété. Nous pourrions initialiser la propriété avec n'importe quel Observable mais dans la pratique nous utiliserons la classe Angular EventEmitter (qui hérite de la classe Subject d'RxJS qui elle même hérite de la classe Observable d'RxJS).

export class BookPreviewComponent {
    @Output() rate = new EventEmitter();
}

EventEmitter est une classe générique et il est recommandé de la typer pour éviter d'émettre des valeurs du mauvais type par erreur ou plus simplement pour indiquer à l'utilisateur du composant le type de données émises par l'"Output" dès la première lecture.

@Output() rate = new EventEmitter<number>();

Faites attention à bien importer la bonne classe EventEmitter.

4. Emission de valeurs

Comme son nom l'indique, un EventEmitter permet d'émettre des valeurs. Il peut donc être utilisé n'importe où dans la classe BookPreviewComponent pour remonter des valeurs au composant parent via la méthode emit.

export class BookPreviewComponent {

    @Output() rate = new EventEmitter<number>();

    iLoveIt() {
        this.rate.emit(5);
    }

}
<button (click)="iLoveIt()">I LOVE IT</button>

... il ne se passe rien mais par analogie avec les , il faut ajouter le décorateur @Output() :

Comme indiqué précédemment, avec l', si Angular trouve un "output" du même nom, il ajoute un listener dessus avec la méthode subscribe. On remarque donc qu'Angular s'attend à ce que les "Outputs" soient des objets qui définissent la méthode subscribe (ou alors quelque chose de similaire à des instances d'"Observables". Cf. RxJS.).

Inputs
Event Binding
Event Binding
Inputs
Inputs
Event Binding
Attention à bien importer le bon `EventEmitter`