4 Passare dati tra componenti
Rifacendoci all’esempio precedente, creiamo un nuovo componente chiamato user che diventerà il componente figlio di users.
ng g c user
Nel template di user copiamo il contenuto dell’array. L’obbiettivo è quello di passare i dati tra il componente padre users e il discendente user.
<td>{{user.nome}}</td>
<td>{{user.cognome}}</td>
<td>{{user.cf}}</td>
<td>{{user.mail}}</td>
<td>{{user.eta}}</td>
<td>{{user.tel}}</td>
<td>{{user.prov}}</td>
Se inseriamo il tag HTML del componente <app-user> , riceveremmo un errore di variabile user sconosciuto, Questo accade perchè il componente user, non riconosce la variabile user presente nell’array, proviamo lanciando il componente <app-user> da users
<app-user></app-user>
aggiungiamo ora la variabile user passata in ingresso (input) da un altro componente, questo in angular viene fatto avvolgendo tra parentesi quadre la proprietà da passare <app-user [user] >
<tr *ngFor="let user of users"> <app-user [user] = "user"></app-user>
Da notare che abbiamo dichiarato [user] uguale a user usando le doppie virgole, perchè è la varibile user creata nel ciclo *ngFor: *ngFor=”let user
Questo non basta, intanto bisogna dichiarare la variabile user nella classe del componente user
export class UserComponent implements OnInit { user; constructor() { } ngOnInit(): void { } }
Dichiarare una variabile input
Infine dobbiamo indicare ad angular che questa variabile user è di tipo input e che riceverà i dati. Questo può essere fatto tramite un decoratore , cioè una funzione specifica di angular che permette di specificare un tipo di dato che riceverà dei dati. Nel nostro caso dovremmo dichiarare user di tipo @input() cioè che riceve dati in ingresso.
@Input() user;
A questo punto i dati vengono passati correttamente e abbiamo la possibilità di passare dati tra componenti.
Possiamo anche inserire un alias o etichetta per il richiamo esterno al file per facilitare meglio la comprensione semantica
@Input('user-data') user;
a questo punto internamente in user.component.ts sarà utilizzato ancora tramite user, ma esternamente dagli altri files, verrà utilizzato user-data.
Adesso la variabile @Input user contenuta dichiarata nel componente user, riceverà i dati dal componente padre users
<app-user [user-data] = "user"></app-user>
Da notare che nella console del browser viene generato un nuovo blocco HTML <app-user> non riconosciuto dai browser. Per ovviare possiamo fare in modo di passare il selettore come attributo dell’elemento HTML, nel nostro caso il <tr>. Per farlo cambiamo il selettore del nostro componente che sarebbe selector: ‘app-user’, mettendo un elemento <tr> con attributo app-user che si indica tra quadre
selector: 'tr[app-user]',
a questo punto in users.component,ts elimino l’elemento <app-user>
<tr app-user *ngFor="let user of users" [user-data] = "user"></tr>
Nell’HTML del browser sarà generato un <tr> con un attributo app-user vuoto
<tr app-user="" >
Eventuale css dichiarato nel componente padre, andrà spostato nel figlio