Directives et évènements

Bases

Plusieurs types de directives.

• @Input(): passage d'une valeur au composant (prop.)
• @Output(): passage d'une valeur au parent (event.)

@Input(): Parent vers enfant

Doc: officielle

Permet de bind une valeur au composant, depuis le parent.

Dans le contrôleur de l'enfant, la variable visée est attribuée de @Input().

@Input() prend un argument, optionnel, définissant le nom de l'attribut qui sera exposé. Si aucune valeur n'est passée, le nom de la variable est utilisé.

import {Component, Input, OnInit} from '@angular/core';
import {Item} from '../../item.model';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})
export class ItemComponent {
  @Input() value: Item;
}

<app-item
    class="list-group-item"
    *ngFor="let item of items" [item]="item"
    ></app-recipe-item>

@Output(): Enfant vers parent

Doc: officielle

Permet de bind un listener sur un évènement que le composant déclare pouvoir émettre.

Vu qu'il s'agit d'une source d'évènement, la variable attribuée doit être capable d'émettre un évènement. Le type EventEmitter<T> remplit précisément ce travail!

Il suffit ensuite d'appeler la méthode emit(value?: T) de notre variable membre, et si notre composant parent a bindé une méthode sur cet évènement, il obtiendra la valeur.

import {Component, Input, OnInit} from '@angular/core';
import {Item} from '../../item.model';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})
export class ItemComponent {
  @Input() value: Item;
  @Output() selected = new EventEmitter<Item>();

  onSelect() {
      this.selected.emit(this.value);
  }
}

<app-item
    class="list-group-item"
    *ngFor="let item of items" [item]="item"
    (selected)="console.log($event)"
    ></app-recipe-item>