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
Code scanning e advanced security con Azure DevOps
Migrare una service connection a workload identity federation in Azure DevOps
Evitare la command injection in un workflow di GitHub
Utilizzare la libreria Benchmark.NET per misurare le performance
Gestire undefined e partial nelle reactive forms di Angular
Evitare il flickering dei componenti nel prerender di Blazor 8
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Gestire i null nelle reactive form tipizzate di Angular
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Usare le variabili per personalizzare gli stili CSS
Utilizzare le collection expression in C#
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8