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.