creareapp angularGestire gli Eventi in Angular 4

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

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 il gestore di evento, che nell'esempio precedente è stato chiamato inviaDato():

class MioComponente {
  constructor() {
    // azioni da eseguire all'inizializzazione del componente
  } 
  inviaDato() {
    // metodo per l'invio del dato
  }
}

Se volessi passare l'oggetto evento ($event) collegato al target, dovrei scrivere:Invia e recuperarlo nel metodo collegato alla classe, nel seguente modo:

class MioComponente {
  constructor() {
    // azioni da eseguire all'inizializzazione del componente
  } 
  inviaDato(event) {
    // qui posso usare l'oggetto event e i suoi metodi
    // event.preventDefault();
  }
}

Vedremo come usare questi gestori quando parleremo della gestione di moduli web in un'applicazione Angular 2.

Gestire il CLICK su di un elemento di un template

Applicando questi concetti all'esempio del componente visto nel tutorial precedente, potrei inserire nel template:

<nav>
 <ul>
  <li><a (onclick)="cambioPagina()" id="m1">{{vocimenu[0]}}</a></li>
  <li><a (onclick)="cambioPagina()" id="m2">{{vocimenu[1]}}</a></li>
  <li><a (onclick)="cambioPagina()" id="m3">{{vocimenu[2]}}</a></li>
 </ul>
</nav>

dove cambioPagina() sarà un metodo definito nel componente mioMenu:

class MioMenu {
   constructor() {
   }
   cambioPagina(event){ 
     alert("Ok. Ho cliccato sul link con id " + event.currentTarget.id);
   }
}

dove event.currentTarget identifica l'oggetto HTML del dom, su cui l'utente ha cliccato.

I più comuni gestori di evento

Le operazioni classiche che l'utente può compiere sui diversi elementi che costituisco l'interfaccia della mia app, sono oltre al click o tocco, il posizionamento del mouse sopra all'elemento, la pressione del tasto enter, la pressione di un tasto. Ognuno di questi eventi può essere intercettato con i seguenti gestori:

  • (click) -> intercetta il click su di un elemento
  • (mouseover) -> intercetta il posizionamento del mouse sopra all'elemento
  • (keyup) -> intercetta la pressione e rilascio di un tasto della tastiera
  • (keyenter) -> intercetta la pressione del tasto enter della tastiera

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.3/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.