In questo articolo vedremo 1) l'assegnazione di valori, anche sotto forma di espressioni, a proprieta e attributi degli elementi html; 2) come mettersi in ascolto e rispondere agli eventi generati dalle azioni degli utenti; 3) L'uso delle direttive incorporate.
L'interpolazione consente di visualizzare nel modello i valori delle proprietà di classe del componente. Nel modello i nomi delle proprietà vengono racchiusi tra parentesi graffe doppie{{}}. Sintassi nota come moustache syntax
// component.html
<p>Il mio nome è {{ name }}</p>
// Angular valuta prima l'espressione e poi trasforma in stringa
<p> Score count: {{ 1 + 1 }} </p>
// vengono considerati anche dei metodi
<p> {{ sum() }} </p>
// component ts
export class Component {
name = 'Peter';
sum() {
return 1+1;
}
}
La Property Binding consente di impostare dei valori per le proprietà degli elementi Html. Queste proprietà vengono racchiuse tra parentesi quadre ad indicare che l'elemento a destra dell'assegnazione sia considerato come una espressione dinamica. Quando si racchiude la proprietà tra parentesi quadre es. [hidden] stiamo manipolando la proprietà DOM e non l'attributo HTML
<img [src]="itemImageUrl" />
<tr><td [colSpan]="1 + 1">Prima cella</td></tr>
// si sta passando un valore alla proprietà childItem del componente figlio
<app-item-detail [childItem]="parentItem"></app-item-detail>
// in tal caso è possibile passare anche riferimenti a tag html ex ...<strong>prova</strong>
<span [innerHTML]="evilTitle"></span>
// impostare uno stile - utilizzare [style.<nome-style>]
<h1 [style.color]="color" [style.font-size]="fontSize">Titolo news</h1>
// Multi-style binding
<h1 [style]="dimension">Titolo news</h1>
// impostare una classe - utilizzare [class.<nome-classe>]
<h1 [class.backcolor]="bkcolor">Titolo news</h1>
// Multi-class binding
<h1 [class]="espressionClass">Titolo news</h1>
// in taluni casi risulta necessario impostare un attributo. Usare [attr.<nome-attributo>]
<tr><td [attr.colspan]="1 + 1">Primo valore</td></tr>
Consente di ascoltare e rispondere alle azioni dell'utente. L'associazione avviene inserendo l'evento tra parentesi tonde () ad indicare che ci poniamo in ascolto di quel particolare evento. A destra dell'assegnazione si pone il codice js che sarà chiamato al verificarsi dell'evento.
// ci poniamo in ascolto dell'evento click
<button (click)="updateName()">Aggiornamento pulsante</button>
// altri eventi che possono essere gestiti
// (click), (mouseover), (keyup), (keyenter) e(change)
Possiamo anche gestire eventi personalizzati con EventEmitter
// definizione dell'evento nel componente figlio
@Output() deleteRequest = new EventEmitter<Item>();
delete() {
this.deleteRequest.emit(this.item);
...
}
// inserimento del componente figlio nel modello del componente padre (es. list)
// qui viene impostato il metodo padre che sarà invocato quando si verificherà
// l'evento deleteRequest
<app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>
Con l'uso del two-way Binding ci si mette in ascolto ad un evento e simultaneamente si assegna un valore ad una proprietà. Utilizzando la direttiva ngModel si aggiunge il data binding bidirezionale ad un elemento del modulo HTML (L'uso della direttiva ngModel sarà vista più avanti).
// si utilizza contemporaneamente parentesi quadre e tonde
<app-sizer [(size)]="fontSizePx"></app-sizer>
// viene definita una variabile #phone che fa riferimento all'input
<input #phone placeholder="phone number" />
// nello stesso modello posso far riferimento alla variabile per ricavarne il valore
<button (click)="callPhone(phone.value)">Call</button>
// direttiva [ngClass] se isSpecial è vera setta la classe special
<div [ngClass]="isSpecial ? 'special' : ''">Direttiva ngClass</div>
// settaggio diretto delle classi
<div [ngClass]="{modified: true, special: true}">Settaggio classi</div>
// settaggio diretto degli stili
<div [ngStyle]="{'font-style': italic, 'font-weight': 'bold'}">Settaggio stili</div>
// Come già detto precedentemente con l'uso della direttiva ngModel
// si aggiunge il data binding bidirezionale ad un elemento del modulo HTML.
// per utilizzare la direttiva importiamo FormsModule in AppModule
// import { FormsModule } from '@angular/forms';
<input [(ngModel)]="currentItem"><h1>{{ currentItem }}</h1>
// non visualizza il tag <div> su null e false - isActive = false;
<div *ngIf="isActive">Hello, <span>Visualizza su true</span></div>
// ripete un ciclo sugli elementi di un array - es. items = [{name:'Vito'},{..},{..}];
<div *ngFor="let item of items; let i=index; let pari = even; let dispari = odd">{{item.name}}</div>
// utile è l'uso dell'elemento <ng-container> nel caso non avessimo tag di riferimento
<ng-container *ngIf="isActive">{{item.name}}</ng-container>
// visualizza un elemento tra diversi elementi possibili
<div [ngSwitch]="currentItem">
<app-stout-item *ngSwitchCase="'stout'" [item]="currentItem"></app-stout-item>
<app-device-item *ngSwitchCase="'slim'" [item]="currentItem"></app-device-item>
<app-unknown-item *ngSwitchDefault [item]="currentItem"></app-unknown-item>
</div>
Con l'uso del comando ng generate directive possiamo creare direttive personali e utilizzarle nelle nostre applicazioni.
Send Comment