Émetteur d'événements en Angular

1. Qu’est-ce que EventEmitter dans Angular
2. Utilisation de EventEmitter dans Angular

Nous présenterons EventEmitter en Angular et l’utilisation appropriée de EventEmitter en Angular. Et nous donnerons aussi un exemple de EventEmitter en angular.

Qu’est-ce que EventEmitter dans Angular

EventEmitter est un module qui permet de partager des données entre les composants à l’aide des méthodes emit() et subscribe(). EventEmitter se trouve dans la couche Observables, qui observe les changements et les valeurs et émet les données vers les composants abonnés à cette instance EventEmitter.

emit()

emit() est une méthode EventEmitter qui émet un événement contenant une valeur donnée.

# angular
emit(value?: A): void

emit() n’a qu’un seul paramètre, value.

subscribe()

subscribe() est une méthode EventEmitter qui enregistre les gestionnaires pour les événements émis par cette instance.

# angular
subscribe(next?: (value: A) => void, error?: (error: any) => void, complete?: () => void) : Subscription

subscribe() a trois paramètres facultatifs qui peuvent être utilisés pour transmettre des valeurs, des erreurs ou une notification d’achèvement dans EventEmitter.

• Le paramètre next est un gestionnaire personnalisé pour les événements émis.
• Le paramètre error est un gestionnaire personnalisé pour les notifications d’erreur de cet émetteur.
• Le paramètre complete est un gestionnaire personnalisé pour une notification d’achèvement de cet émetteur.

Utilisation de EventEmitter dans Angular

Maintenant, nous allons utiliser EventEmitter comme exemple pour le comprendre complètement. Dans cet exemple, nous allons changer la couleur d’arrière-plan et la couleur de police du composant et afficher ses valeurs dans d’autres composants.

Donc, dans un premier temps, nous allons configurer notre fichier app.module.ts et importer des modules et des composants.

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { BgChangeComponent } from './bg-change.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent, BgChangeComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Maintenant, nous allons définir notre fichier html pour notre composant d’application et ajouter le code suivant dans le fichier app.component.html.

# angular
<emitted (touch)="respond()" name="{{ name }}" [color]="color"></emitted>
<p>{{ response }}</p>
<p>{{ color }}</p>
<bg-change (colorChange)="changeColor($event)"></bg-change>

Ici, nous avons utilisé changeColor($event) qui est un EventEmitter, et nous affichons les valeurs de EventEmitter dans response et color.

Maintenant, nous allons définir le fichier app.component.ts et définir les valeurs pour les variables name, response, et color affichées lors du premier chargement de la page.

Nous allons définir une fonction respond(), qui va changer la valeur de la response.

Nous définirons également la fonction changeColor(), qui fixera la valeur de la couleur. Ainsi, notre fichier app.component.ts ressemblera à ceci :

# angular
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 11';

  response = 'Background not changed yet';

  color = 'brown';

  respond() {
    this.response = 'Success';
  }

  changeColor(color) {
    this.color = color;
  }

}

Nous allons maintenant éditer notre fichier hello.component.ts et y ajouter le code suivant.

# angular
import {
  Component,
  Input,
  ElementRef,
  Renderer2,
  Output,
  EventEmitter,
  OnInit,
  OnChanges,
} from '@angular/core';

@Component({
  selector: 'emitted',
  template: `<h1
  (click)="emit()"
  >{{text}} {{name}}</h1>`,
})
export class HelloComponent implements OnInit, OnChanges {
  @Input() name: string;

  @Input() color = 'brown';

  text = 'It is';

  @Output()
  touch = new EventEmitter<string>();

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    this.renderer.setStyle(this.el.nativeElement, 'color', this.color);
  }

  ngOnChanges() {
    this.renderer.setStyle(this.el.nativeElement, 'color', this.color);
  }

  emit() {
    this.touch.emit('touched');
  }
}

Dans le composant ci-dessus, @component obtiendra la balise emitted du fichier app.component.html et définira une couleur lors de l’initialisation. Lorsque le bouton est cliqué, il changera la couleur. Nous passons également le text qui est affiché au chargement.

Nous allons maintenant ajouter un nouveau fichier bg-change.component.ts. et ajoutez-y le code suivant.

# angular
import {
  Component,
  ViewChild,
  ElementRef,
  Renderer2,
  EventEmitter,
  Output,
} from '@angular/core';

@Component({
  selector: 'bg-change',
  template: `<button 
  (click)="Bgchange()" 
  >{{content}}</button>`,
  styles: [`button { padding: 10px; }`],
})
export class BgChangeComponent {
  body = this.el.nativeElement.ownerDocument.body;

  activateColor = 'white';

  @Output()
  colorChange = new EventEmitter<string>();

  content = 'Change Page Background';

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  Bgchange() {
    this.colorChange.emit(this.activateColor);

    this.activateColor === 'white'
      ? (this.activateColor = 'red')
      : (this.activateColor = 'white');

    this.renderer.setStyle(this.body, 'background', this.activateColor);
  }
}

Donc, notre sortie ressemblera à ci-dessous.