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.
Indice
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.