Interazione tra componenti

In questa lezione imparerà come comunicano i componenti in Angular, soprattutto tra componenti padre e figlio.

Interazione padre-figlio

Spesso i componenti devono condividere i dati. I componenti padre possono passare dati ai componenti figlio utilizzando le proprietà di input.

Utilizzare @Input()

Utilizzi il decorator @Input() per ricevere dati da un componente padre:

@Input() userData: string;

Passare dati al componente figlio

Nel template del componente padre, passi i dati utilizzando l'associazione a proprietà:

<app-child [userData]="parentData"></app-child>

Comunicazione dal figlio al padre

I componenti figlio comunicano verso l'alto utilizzando eventi e il decorator @Output().

Utilizzare @Output()

Crei un event emitter per inviare dati dal componente figlio a quello padre:

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

Emettere eventi

Emetta eventi dal componente figlio:

sendData() {
  this.dataEvent.emit('Hello from Child');
}

Ascoltare gli eventi nel componente padre

Gestisca gli eventi emessi nel template del componente padre:

<app-child (dataEvent)="handleEvent($event)"></app-child>

Riepilogo

Ora comprende come i componenti possano interagire tramite input e output in Angular. Continui a esercitarsi!