Gestire gli Eventi in Angular

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

Ultimo aggiornamento: 7 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 s...

Ohps... scusami la fastidiosa interruzione, ma per questioni gestionali, tutti i tutorial completi gli ho spostati a questo link: WEBSU. Risulterà più semplice anche per te seguirli e chiedermi dei consigli. Ti aspetto, dai... bastano 5 secondi. Non buttare tutto lo sforzo fatto per arrivare qui.

Hai tempo per leggere? Angular

Non farti scappare il mio libro appena aggiornato: "Angular 100% Operativo". Un corso completo su Angular per imparare rapidamente le tecniche per creare WebAPP e non solo. Prenotalo cliccando l'immagine qui sotto

Categoria: Angular