Angular wordt geleverd met een reeks ingebouwde directives zoals ngIf, ngFor en ngClass. Maar je kunt ook je eigen aangepaste directive maken om specifieke taken in je applicatie af te handelen. Hier volgt een praktische uitleg over hoe je er zelf een kunt bouwen.

Genereer de aangepaste directive

Het is een goede gewoonte om je code te organiseren door een aparte map voor je directives aan te maken. Noem deze bijvoorbeeld directives.

Met dit commando wordt een nieuwe map genaamd directives aangemaakt in de app-directory en wordt het nieuwe directive-bestand daarin geplaatst:

• highlight-on-complete.directive.ts – bevat de logica van de directive;

• highlight-on-complete.directive.spec.ts – unit test-bestand (kan verwijderd worden indien niet nodig).

Hier zie je hoe de basisstructuur van de directive eruitziet:

Definieer wat de directive moet doen

Deze directive markeert een taak-element groen als het als voltooid is gemarkeerd. Anders worden de stijlen verwijderd.

Om aan Angular aan te geven dat deze klasse een directive is, decoreren we deze met @Directive:

@Directive({
  selector: '[appHighlightOnComplete]'
})

De selector [appHighlightOnComplete] betekent dat de directive als een attribuut wordt gebruikt, niet als een tag of structurele directive.

In je HTML pas je het als volgt toe:

<div [appHighlightOnComplete]="task.completed"></div>

De directive laten reageren op wijzigingen

Om wijzigingen aan de completed-input te detecteren, implementeren we de OnChanges-interface:

We definiëren ook een invoereigenschap om de waarde van het component te ontvangen:

Wat dit doet:

• Informeert Angular dat de waarde vanuit de template wordt aangeleverd (eerder gaven we task.complete door vanuit de template);

• Verbindt de interne completed-eigenschap van de directive met de waarde die vanuit de template wordt doorgegeven;

• Stelt een standaardwaarde van true in (deze wordt overschreven zodra de daadwerkelijke data wordt ontvangen).

Veilige toegang tot de DOM

Angular gebruikt dependency injection om toegang te bieden tot de DOM en rendering-tools.

In de constructor injecteren we:

ElementRef geeft ons een referentie naar het host-DOM-element. Renderer2 stelt ons in staat om veilig stijlen en attributen aan te passen zonder direct het DOM te manipuleren.

Reageren op wijzigingen met ngOnChanges

Nu implementeren we de hoofdlogica in ngOnChanges, die wordt uitgevoerd telkens wanneer de inputwaarde verandert.

Volledige implementatie:

De methode ngOnChanges wordt geactiveerd wanneer Angular wijzigingen detecteert aan de invoereigenschappen van de directive.

In dit geval reageert het op updates van de completed-waarde die vanuit de template wordt doorgegeven. Als completed true is, voegt de directive een groene rand en een lichtgroene achtergrond toe aan het element. Als het false is, worden deze stijlen verwijderd en keert het element terug naar zijn oorspronkelijke uiterlijk. Dit biedt een visuele indicatie van voltooide taken.

Met deze aangepaste directive kun je stijlgedrag op een herbruikbare en overzichtelijke manier inkapselen. Je kunt het nu toepassen op elk element in je app, zonder logica te dupliceren over verschillende componenten. Het is een goed voorbeeld van hoe het directivesysteem van Angular je helpt om meer modulaire en beter onderhoudbare code te schrijven.