Template e associazione dei dati

I template consentono di visualizzare contenuti dinamici in Angular. In questa lezione esplorerà il funzionamento dei template e dell'associazione dei dati.

Che cos'è un template?

Un template è codice HTML che Angular utilizza per visualizzare la vista di un componente. Combina HTML e la sintassi specifica di Angular per mostrare i dati.

Interpolazione

L'interpolazione consente di inserire nell'HTML i valori provenienti dal componente. Utilizzi le doppie parentesi graffe per visualizzare i dati:

{{ data }}

{{ username }}

Associazione a proprietà

L'associazione a proprietà consente di impostare dinamicamente le proprietà degli elementi HTML:

[src] = "imageUrl"

<img [src]="user.profilePicture">

Associazione a eventi

L'associazione a eventi consente all'applicazione di rispondere alle azioni dell'utente:

(click)="onClick()"

<button (click)="showAlert()">Click me</button>

Associazione bidirezionale

L'associazione bidirezionale mantiene sincronizzati l'interfaccia utente e i dati. Utilizzi [(ngModel)]:

<input [(ngModel)]="user.name">

Direttive strutturali

Le direttive strutturali modificano la struttura del DOM. Tra gli esempi ci sono *ngIf e *ngFor.

<div *ngIf="isVisible">Visible Content</div>

Utilizzare ngFor

*ngFor scorre i dati e visualizza ripetutamente gli elementi:

<li *ngFor="let item of items">{{ item }}</li>

Riepilogo

Ha imparato a utilizzare i template e l'associazione dei dati per creare viste Angular dinamiche!