Grazie a librerie come Bootstrap, SemanticUI, Material e altre ancora, è diventato molto più semplice, rispetto al passato, creare interfacce grafiche coerenti a livello di stile, dimensioni del testo, spaziature e molto altro ancora. Queste librerie introducono una serie di classi CSS da utilizzare nel nostro codice per stilizzare gli elementi e spesso, per stilizzare un singolo elemento, dobbiamo assegnare più di una classe.
Per fare un esempio, per stilizzare un bottone piccolo in Bootstrap, dobbiamo assegnare all'oggetto button le seguenti classi: btn per dare gli stili di base di un bottone, btn-primary per specificare lo stile del bottone principale e btn-sm per assegnare gli stili che riducono le dimensioni del bottone. Sebbene assegnare queste classi sia estremamente semplice, è altrettanto semplice sbagliare a scrivere o dimenticare una classe. Inoltre, se ad un certo punto decidiamo di cambiare gli stili, dobbiamo ripassare in tutte le pagine o affidarci a dei replace.
In Angular possiamo limitare il problema creando una direttiva che imposta questi stili per noi.

@Directive({
  selector: 'button[myButton]'
})
export class ButtonDirective implements AfterViewInit {
  constructor(private renderer: Renderer2, private elementRef: ElementRef) {}

  ngAfterViewInit() {
    this.renderer.addClass(this.elementRef.nativeElement, 'btn btn-primary btn-sm');
  }
}

Questa direttiva si applica a tutti i tag button con l'attributo myButton. Non appena la view viene inizializzata, questa direttiva recupera il pulsante a cui è associata e gli aggiunge le classi CSS di bootstrap. Se decidessimo di cambiare le classi da applicare ai pulsanti, ci basterebbe modificare questa direttiva e automaticamente lamodifica verrebbe applicata a tutti i pulsanti con la direttiva.