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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Short-circuiting della Pipeline in ASP.NET Core
Miglioramenti nelle performance di Angular 16
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Ottimizzazione dei block template in Angular 17
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Evitare il flickering dei componenti nel prerender di Blazor 8
Semplificare il deployment di siti statici con Azure Static Web App
Utilizzare Tailwind CSS all'interno di React: installazione
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Generare file PDF da Blazor WebAssembly con iText
Supportare il sorting di dati tabellari in Blazor con QuickGrid