Gestire l'interazione con l'utente

L'utente interagisce con la nostra applicazione generando inevitabilmente eventi sugli elementi del DOM. Supponiamo, ad esempio, di voler aggiungere al nostro componente ArticoloComponent la possibilità per l'utente di esprimere il proprio apprezzamento per l'articolo che ha appena letto. Possiamo implementare questa funzionalità aggiungendo una proprietà della classe Articolo che raccoglie il numero degli apprezzamenti ed un pulsante al nostro componente per gestire l'interazione con l'utente.

Avremo quindi la classe Articolo ridefinita nel seguente modo:

export class Articolo {
  titolo:string;
  autore:string;
  testo:string;
  numApprezzamenti?:number = 0;
}

Notiamo l'aggiunta della proprietà numApprezzamenti di tipo numerico con valore iniziale uguale a zero.

Ridefiniamo anche il template del componente ArticoloComponent come mostrato di seguito:

<h3>{{articolo.titolo}}</h3> 
<i>{{articolo.autore}}</i><br/> 
<p>{{articolo.testo}}</p> 
<p>
	Voti: {{articolo.numApprezzamenti}}
	<button (click)="incrementaApprezzamenti()" >Mi piace</button>
</p>

Rispetto alla versione precedente abbiamo aggiunto un paragrafo con la visualizzazione del numero di apprezzamenti dell'articolo ed un pulsante per consentire all'utente di aggiungere il proprio apprezzamento. Il risultato grafico di queste modifiche sarà simile a quanto mostrato dalla seguente figura:

Come possiamo notare dal codice del template, abbiamo associato l'incremento del numero di apprezzamenti dell'articolo al clic sul pulsante Mi piace utilizzando una sintassi particolare:

<button (click)="incrementaApprezzamenti()" >Mi piace</button>

L'espressione (click) indica l'evento clic sul pulsante, mentre l'espressione a destra dell'assegnamento indica l'azione da eseguire in corrispondenza del verificarsi di tale evento. La funzione incrementaApprezzamenti() viene implementata come metodo del nostro componente:

import { Component, Input } from '@angular/core';
import { Articolo } from './articolo'
@Component({
	selector: 'articolo',
	templateUrl: 'articolo.component.html',
	styleUrls: ['articolo.component.css']
})
export class ArticoloComponent {
	@Input() articolo: Articolo;
	constructor() {}
	incrementaApprezzamenti() {
		this.articolo.numApprezzamenti = this.articolo.numApprezzamenti + 1;
	}
}

La funzione incrementaApprezzamenti() quindi si limita ad incrementare il valore corrente della proprietà numApprezzamenti dell'articolo associato al componente.

L'effetto dell'incremento del numero di apprezzamenti è immediato: non appena l'utente clicca sull'apposito pulsante, viene eseguita la relativa funzione ed il nuovo valore della proprietà viene visualizzato a video.

Gestire gli eventi del DOM

L'esempio appena visto ha mostrato come Angular 2 ci consente di intercettare e gestire gli eventi di interazione tra l'utente ed il DOM della view corrente. A differenza di Angular 1.x che prevedeva delle direttive specifiche per la gestione degli eventi del DOM, Angular 2 ci consente di utilizzare una sintassi semplificata per specificare l'evento da gestire all'interno del template HTML: il nome dell'evento racchiuso tra parentesi tonde. Naturalmente questo approccio vale per tutti gli eventi del DOM: da focus a blur, da change a mouseover.

Angular prevede anche una sintassi alternativa per specificare l'evento da gestire. Essa è rappresentata da un attributo composto da on- ed il nome dell'evento, come mostrato dal seguente esempio:

<button on-click="incrementaApprezzamenti()" >Mi piace</button>

Sebbene l'uso dell'attributo on-click sia del tutto equivalente all'utilizzo di (click), è consigliabile utilizzare un approccio uniforme all'interno di un'applicazione, preferendo in linea di massima la sintassi basata sulle parentesi tonde perché più comunemente usata e conosciuta. Una possibile motivazione per preferire la sintassi on-evento può essere legata al fatto di utilizzare un preprocessore per la generazione del codice dei template che non gradisce l'uso di attributi tra parantesi.

L'oggetto $event

Possiamo ottenere informazioni associate all'evento ed eventualmente controllarlo in maniera più accurata passando alla funzione di gestione l'oggetto $event:

<button (click)="incrementaApprezzamenti($event)" >Mi piace</button>

L'oggetto $event consente di avere un maggior controllo sull'evento e di poter gestire propagazione e bubbling come per gli eventi standard del DOM. Ad esempio, il seguente codice impedisce la propagazione dell'evento clic agli elementi figli dell'elemento corrente:

incrementaApprezzamenti(event) {
	this.articolo.numApprezzamenti = this.articolo.numApprezzamenti + 1;
	event.preventDefault();
}

Associare all'evento istruzioni JavaScript

Negli esempi presentati finora abbiamo associato ad un evento la chiamata di una funzione con l'eventuale passaggio dell'oggetto $event. Tuttavia, è opportuno precisare che all'evento è possibile associare direttamente un'istruzione JavaScript come ad esempio un assegnamento, come mostrato nel seguente esempio:

<button (click)="articolo.numApprezzamenti = articolo.numApprezzamenti + 1" >
	Mi piace
</button>