In Angular le direttive sono oggetti che permettono di attaccare una funzionalità a oggetti HTML esistenti. Ad esempio, tramite una direttiva possiamo modificare un pulsante per aggiungere l'icona o gli stili CSS dibase da applicare a tutti i pulsanti. Per fare questo dobbiamo ricorrere a due classi molto importanti: ElementRef e Renderer2.
La prima permette l'accesso all'oggeto HTML a cui abbiamo applicato la direttiva, mentre la seconda ne permette la manipolazione astraendo il DOM dal nostro codice. Grazie a questa classe possiamo lavorare su piattaforme HTML che non siano per forza un browser.
In questo esempio molto semplificato, applichiamo uno stile al controllo al mouseover e l rimuoviamo al mouseout. Ovviamente potremmo raggiungere lo stesso effetto usando solamente i CSS, ma lo scopo dello script è mostrare il funzionamento dele due classi.
export class MyDirective { constructor(private el: ElementRef, private renderer: Renderer2) {} @HostListener('mouseover') onMouseOver() { const control = this.el.nativeElement.querySelector('.card-text'); this.renderer.setElementStyle(control, 'display', 'block'); } @HostListener('mouseout') onMouseOut() { let control = this.el.nativeElement.querySelector('.card-text'); this.renderer.setElementStyle(control, 'display', 'none'); } }
La proprietà nativeElement di ElementRef permette di accere all'oggetto nativo della piattaforma su cui gira l'applicazione mentre il metodo setElementStyle permette di modificarne le proprietà CSS. Nii prossimi script vedremo altri utilizzi di direttive e di queste classi.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Disabilitare un pulsante in Blazor durante il salvataggio
Utilizzare al meglio gli oggetti HTML input sfruttando i nuovi type
ASP.NET Core 5 & Blazor 5
Ottimizzare la compilazione di applicazioni Angular con il Fast and Loose Incremental Checking di TypeScript
Utilizzare un web worker in Angular
Introduzione a Blazor WebAssembly
Visual Studio Code per lo sviluppo in team
Tradurre in lingua contenuti HTML con i cognitive service
Migrare le configurazioni di una Web App Azure verso App Configuration
Utilizzare app-shell per rendere un'applicazione Angular più responsiva alla partenza
Introduzione a GitHub
Sfruttare al massimo Kubernetes con Azure DevOps
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Creare un record in C#
- Winget: un nuovo package manager per Windows
- il 18/02 c'è il #container & #devops day! https://aspit.co/ContainerDevOpsDay-21 Le iscrizioni sono sempre aperte e la Call For Paper è attiva fino al 28/01! #aspilive #cfp
- Attesa e validazione manuale nelle pipeline YAML di Azure DevOps
- Utilizzare il CSS Grid Model per creare il layout di un sito
- Montare una file share con Azure Container Instance
- Container & DevOps Day - Online