Angular

Appearance

Utiliser @Output pour communiquer avec un composant parent ​

Dans notre composant, nous souhaitons effectuer un événement. Par exemple, quand l'utilisateur clique sur un bouton, un compteur s'incrémente.

ts
import {Component, Input} from '@angular/core';

@Component({
  selector: 'count',
  template: `
    <p>{{n}}</p>
    <button (click)="up()"></button>
  `
})
export class CountComponent {
  n: number = 0;

  up() {
    this.n++;
  }
}
import {Component, Input} from '@angular/core';

@Component({
  selector: 'count',
  template: `
    <p>{{n}}</p>
    <button (click)="up()"></button>
  `
})
export class CountComponent {
  n: number = 0;

  up() {
    this.n++;
  }
}

Nous mettons des parenthèses autour du nom de l'événement pour indiquer une valeur de sortie.

Envoyer la valeur en dehors du composant ​

js
import {Component, EventEmitter, Output} from '@angular/core';

@Component({
  selector: 'count',
  template: `
    <p>{{n}}</p>
    <button (click)="up()">Up</button>
  `
})
export class CountComponent {
  n: number = 0;
  @Output() numberChange: EventEmitter<number> = new EventEmitter();

  up() {
    this.n++;
    this.numberChange.emit(this.n);
  }

}
import {Component, EventEmitter, Output} from '@angular/core';

@Component({
  selector: 'count',
  template: `
    <p>{{n}}</p>
    <button (click)="up()">Up</button>
  `
})
export class CountComponent {
  n: number = 0;
  @Output() numberChange: EventEmitter<number> = new EventEmitter();

  up() {
    this.n++;
    this.numberChange.emit(this.n);
  }

}

Deux importations :

  • EventEmitter : Emettre l'événement aux composants parents
  • @Output : Décorateur indiquant la propriété envoyant l'information.

La propriété numberChange est donc utilisé dans le template pour recevoir l'événement :

js
// composant parent
import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <div>
	    <count (numberChange)="multiplicate($event)"></count>
      {{result}}
	  </div>
  `
})
export class AppComponent {
  result: number = 0;

  multiplicate(val: number) {
    this.result = val * 2;
  }
}
// composant parent
import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <div>
	    <count (numberChange)="multiplicate($event)"></count>
      {{result}}
	  </div>
  `
})
export class AppComponent {
  result: number = 0;

  multiplicate(val: number) {
    this.result = val * 2;
  }
}

Nous appelons donc multiplicate qui va juste multiplier la valeur du compteur par deux.