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
Implementare l'infinite scroll con QuickGrid in Blazor Server
Evitare la script injection nelle GitHub Actions
Utilizzare le collection expression in C#
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Gestire undefined e partial nelle reactive forms di Angular
Miglioramenti agli screen reader e al contrasto in Angular
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Creare gruppi di client per Event Grid MQTT
Routing statico e PreRendering in una Blazor Web App
Gestire liste di tipi semplici con Entity Framework Core
Eseguire attività basate su eventi con Azure Container Jobs