Creare una direttiva che modifica l'aspetto di un oggetto in Angular

di Stefano Mostarda, in HTML5, Angular,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi