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
Conoscere il rendering Server o WebAssembly a runtime in Blazor
Implementare il throttle in JavaScript
Ridurre il reflow cambiando il CSS
Loggare le query più lente con Entity Framework
Documentare i servizi REST con Swagger e OpenAPI con .NET 9
Change tracking e composition in Entity Framework
Aggiornare a .NET 9 su Azure App Service
Creare una libreria CSS universale: i bottoni
Gestire il routing HTTP in Azure Container App
Generare una User Delegation SAS in .NET per Azure Blob Storage
Integrare un servizio esterno con .NET Aspire
Integrare modelli AI in un workflow di GitHub
I più letti di oggi
- Integrare OpenAI tramite Aspire
- Interagire con Azure DevOps tramite MCP Server
- Creare un agente A2Acon Azure Logic Apps
- Definire il colore di una scrollbar HTML tramite CSS
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!