creareapp angularGestire gli Eventi in Angular 4 e 5

Come gestire l'interazione con elementi del DOM, quali pulsanti o campi di un form, con gli eventi in Angular 4 e 5

Ultimo aggiornamento: 3 giorni fa

Nelle operazioni che si svolgono comunemente all'interno di un'applicazione da parte dell'utente, c'è l'inserimento di dati, e il tocco per cambiare pagina o accedere a informazioni dettagliate, con il classico modello Master/Details In questo caso l'operazione che dobbiamo gestire sarà sempre unidirezionale, ma partirà dalla vista, e invierà l'informazione al componente, quindi alla nostra ipotetica classe mioMenu, il motore del componente.

L'unico modo per conoscere che tipo di azione ha eseguito l'utente, è quella di associare a determinati elementi che compongono la vista, un gestore di evento, esattamente come accade in JavaScript o usando jQuery. La sintassi da usare però è leggermente diversa, anche se più semplice da ricordare rispetto a jQuery o JavaScript.

Gestire il CLICK su di un bottone di un form

Nell'ipotesi in cui la vista del componente o template, sia rappresentata dal classico campo di input, dove l'utente inserisce l'informazione da inviare al componente, e dal bottone per l'invio, per intercettare la pressione su quest'ultimo, potrei scrivere:

<button (click)="inviaDato()">Invia</button>

Come vedi è stato inserito il nome dell'evento da monitorare ossia il click, il tutto all'interno di parentesi tonde, e poi il nome del gestore/metodo della classe che si prenderà cura di recuperare l'informazione. La sintassi quindi da usare sarà sempre del tipo:

(nomeEVENTO)="gestoreEvento()"

Nel corpo della classe chiaramente dovrò definire ...

Per continuare la lettura, registrati gratuitamente alla "CreareApp StartUniversity" oppure effettua il login.

Novità

Non farti scappare il nuovo libro: "Angular 100% Operativo", in offerta su Amazon. Più di 200 pagine, con tutto il percorso per creare una WebAPP e imparare Angular in un quarto del tempo. Prenotalo cliccando l'immagine qui sotto:

Corso Angular 4 100% Operativo

Ti è servito il breve tutorial? Condividilo ADESSO sui social! Grazie :-)

Categoria: Articolo - Autore: Davide Copelli

Voto 4.1/5 basato su 84 Recensioni
© 2013-2017 CreareAPP.com - Tutti i diritti riservati. Tutorial e WebCAMP per creare app in Android e iOS
NB: Tutti i marchi citati sono di proprietà dei rispettivi proprietari. Android is a trademark of Google Inc.