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