Gestione degli eventi nei Component di Angular 2

di Daniele Bochicchio, in HTML5, Angular 2,

Nello script #167 abbiamo visto come creare un Component per Angular 2. Rispetto ad AngularJS 1.x, la gestione degli eventi dal DOM verso il nostro codice è leggermente differente.
In Angular 2 viene utilizzata la notazione con parentesi all'interno del template e viene invocato un metodo definito all'interno della classe che rappresenta il component.

@Component({
  ...
})
export class MyComponent {
  constructor() { 
  }

  clicked(event) { alert('click del pulsante'); }
}

All'interno del template avremo poi questo pezzo di markup:

<button (click)="clicked($event)">Click</button>

Nel codice del template, andremo ad intercettare l'evento click, invocando il metodo clicked definito all'interno del nostro component.

Se volessimo catturare l'evento, è sufficiente passare $event, come nel nostro caso, così da poter, da esempio, bloccare la propogazione dell'evento:

clicked(event) {
  event.preventDefault(); // blocchiamo la propagazione dell'evento
  alert('click del pulsante');
}

Per approfondimenti:
#167 - Creare un component con Angular 2
https://www.html5italia.com/script/167/Creare-Component-Angular.aspx

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi