Firstname Lastname Country Age

Il body della tabella è la parte chiave della nostra pagina e rappresenta il posto in cui dobbiamo:

Ciclare sull’array “users” degli utenti che abbiamo definito nella root application

Inserire una riga che renderizzi il template del nostro Component

Passare, ad ogni iterazione, l’utente corrente al Component

Tutto questo lo riusciamo a fare con una singola riga di codice, la seguente:

La prima cosa da notare è che in questo caso non stiamo renderizzando il nostro Component come elemento, cioè come tag HTML, vero e proprio ma come selettore, cioè come attributo di un elemento riga tr. Più avanti vedremo il perché di questa scelta.

*ngFor=”let u of users” è la direttiva da utilizzare per realizzare un ciclo for e ci permette di scorrere il nostro array “users” avendo un riferimento all’oggetto dell’iterazione corrente nella variabile “u”. La keyword let permette di definire una variabile locale al template che può essere referenziata ovunque al suo interno.

[user]=”u” è il meccanismo che ci permette di passare un parametro in input al nostro component. La sintassi prevede di mettere tra parentesi quadre il parametro per cui si vuole passare il valore e poi il valore stesso.

Nel nostro caso stiamo dicendo che vogliamo passare l’utente “u” dell’iterazione corrente come valore di Input per la proprietà “user” del nostro Component. Se andiamo a riprendere il nostro UserDetailsComponent, vediamo che avevamo definito la proprietà “user” come

@Input() user: User;

Come ultimissima cosa dobbiamo fare una modifica al nostro componente “UserDetailsComponent” e quindi nel file “user-details.component.ts”.

La modifica consiste nello specificare che il Component deve poter essere usato siamo come elemento e quindi come tag “app-user-details” che come selettore di un altro elemento, come lo abbiamo utilizzato noi in precendenza con il tag “tr” per creare le righe “tr app-user-details …”

Per fare questo dobbiamo modificare la linea:

selector: 'app-user-details',

in:

selector: 'app-user-details,[app-user-details]',

Indicando il nome del componente anche tra parentesi quadre, stiamo dicendo appunto che potrà essere utilizzato anche come selettore. Di default, invece, viene utilizzato come elemento.

Il codice completo del Component diventa quindi il seguente:

import { Component, OnInit, Input } from '@angular/core'; import { User } from '../models/user'; @Component({ selector: 'app-user-details,[app-user-details]', templateUrl: './user-details.component.html', styleUrls: ['./user-details.component.css'] }) export class UserDetailsComponent implements OnInit { @Input() user: User; constructor() { } ngOnInit() { } }

A questo punto proviamo ad eseguire la nostra applicazione.

Il risultato che otteniamo è illustrato nell’immagine seguente, dove possiamo vedere la tabella con le informazioni relative ai nostri utenti correttamente visualizzata.



Se apriamo i Developer Tools di Chrome possiamo vedere come all’interno delle righe della tabella che avevamo “etichettato” come app-user-details, sia stato sviluppato il Template del relativo Component e siano quindi state inserite le celle con i valori delle varie proprietà degli oggetti User.



Vai alla parte successiva dell’articolo: Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 5