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 het bouwen van een eigen directive.

Genereer de aangepaste directive

Het is een goede gewoonte om je code te organiseren door een aparte map voor je directives aan te maken. Laten we deze directives noemen.

Met dit commando wordt een nieuwe map met de naam 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 volgt de basisstructuur van de directive:

Definieer wat de directive moet doen

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

Om aan Angular aan te geven dat deze klasse een directive is, wordt deze voorzien van de decorateur @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 zal worden aangeleverd (eerder gaven we task.complete door vanuit de template);

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

• Stelt een standaardwaarde van true in (deze wordt overschreven zodra 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 op een veilige manier 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 invoerwaarde verandert.

Volledige implementatie:

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

In dit geval reageert de methode op updates van de waarde completed 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 krijgt het element zijn oorspronkelijke uiterlijk terug. 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 in verschillende componenten. Dit is een goed voorbeeld van hoe het directivesysteem van Angular je helpt om meer modulaire en onderhoudbare code te schrijven.