Angular EventEmitter: cosa è e come si usa

EventEmitter di Angular è una classe molto utilizzata per la comunicazioni tra componenti.

In questo articolo vedremo cosa sia EventEmitter e come venga utilizzato.

Avrai modo di vedere anche l’utilizzo di questa classe attraverso un esempio interattivo.

EventEmitter Angular: cosa è e come si usa

EventEmitter è una classe di Angular utilizzata per la propagazione di eventi.

Solitamente EventEmitter è utilizzato congiuntamente alla direttiva @Output() per inviare informazioni tra componenti.

Lo schema, di cortesia della documentazione ufficiale di Angular, illustra la direzione del flusso delle informazioni quando si utilizza EventEmitter.

Di seguito troverai un esempio di utilizzo di EventEmitter e @Output().

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
@Component({
  selector: 'app-figlio',
  templateUrl: `./figlio.component.html`,
  styleUrls: ['./figlio.component.css'],
})
export class FiglioComponent {
  @Output()
  valoreDigitato: EventEmitter<string> = new EventEmitter();
  propagaValore(inputEvent: Event): void {
    console.log('evento input ricevuto', inputEvent);
    if (inputEvent && inputEvent.target) {
      const element: HTMLInputElement = inputEvent.target as HTMLInputElement;
      this.valoreDigitato.emit(element.value);
    }
  }
}

Nell’estratto di codice qui sopra definisco l’evento custom valoreDigitato del componente FiglioComponent.

Tale componente è identificato dal selettore app-figlio.

<app-figlio (valoreDigitato)="aggiornaRicevuto($event)"></app-figlio>

In questo estratto di codice, utilizzo il componente FiglioComponent, effettuando una sottoscrizione all’evento valoreDigitato.

Ogni nuova istanza di valoreDigitato sarà gestita dal metodo aggiornaRicevuto($event).

Nel seguito dell’articolo potrai vedere un esempio funzionante che fa uso degli estratti di codice mostrati in questo paragrafo.

Angular EventEmitter: un esempio pratico

In questo esempio sono definiti due componenti: FiglioComponent e PadreComponent.

Il template del componente PadreComponent contiene un istanza di FiglioComponent.

A sua volta, FiglioComponent contiene un campo input di testo.

Utilizzando EventEmitter e @Output() il valore dell’input di testo viene comunicato a PadreComponent.

Approfondimenti Angular

In questo blog sono disponibili diversi articoli relativi ad Angular ed al web develoment.

Eccone alcuni:

• RxJS cosa è e dove viene utilizzata
• Angular variabili di ambiente: come utilizzarle
• Come fare una chiamata AJAX ( GET / POST )
• Perché usare WordPress: i motivi per sceglierlo
• Position Sticky CSS: guida ed esempi pratici

Conclusioni

In questo articolo hai avuto modo di scoprire cosa sia EventEmitter in Angular, grazie ad esempi di codice ed un esempio interattivo.