Si usano i decoratori @Input per ricevere i dati dal componente padre e @Output per inviare i dati dal componente figlio.
Invio dati da padre a figlio: Sul file .ts del padre si ha la variabile x1 il cui valore sarà passato al componente figlio tramite il suo selettore, inserito nel file html del componente padre, che viene collegato a x2 in questo modo: <app-te [x2]='x1'></app-te> (Le 2 variabili non possono avere lo stesso nome.)
(Naturalmente il componente figlio deve essere importato nel componente padre come spiegato in Uso dei componenti) A questo punto nel file .ts del componente figlio, in export class, si usa il decoratore @Input seguito dalla variabile x2 con questa sintassi: @Input() x2: string ="" Ora la variabile x2 contiene il valore passato dal padre. Le variabili possono essere anche più di una.
Invio dati da figlio a padre: Per questo viene usato @Output insieme all'emettitore di eventi EventEmitter. Quando si verifica l'evento il valore della variabile viene inviato al genitore.
Esempio:Nel file html del figlio:<button (click)="invio()">Invia messaggio</button> si configura l'evento che provoca l'invio del valore.
Nel file ts del figlio: si trovano il decoratore @Output che emetterà l'evento e la funzione invio() chiamata dall'evento click del pulsante.
@Output() invioEvent = new EventEmitter <string>
invio() {
this.invioEvent.emit("Messaggio generato dal figlio.");
}
Nel file html del componente padre scrivendo <app-te(invioEvent)="rxmsg($event)"></app-te>
viene ricevuto l'evento, e nel suo file ts ne viene preso il valore ed assegnato alla variabile valoreRx
valoreRx:string = "";
rxmsg(message: string):void {
this.valoreRx = message
}
A questo punto la variabile può essere gestita.