Directives.

Wat zijn directives?

Directives zijn instructies in de DOM (in de HTML-template). Je kan directives in drie grote blokken onderverdelen:

  • Structural directives voegen nieuwe elementen toe of verwijderen elementen uit de DOM. Structural dirictives herken je aan het sterretje voor de naam.
    Bijvoorbeeld: *ngIf en *ngFor.
  • Attribute directives wijzigen het uitzicht of het gedrag van de DOM.
    Bijvoorbeeld: [ngModel], [ngSwitch], [ngClass] en [ngStyle].
  • Custom attribute directives zijn attribute directives die je zelf ontwerpt. Dit wordt in deze cursus niet behandeld.

In de Angular API vind je een volledig overzicht van ingebouwde directives. Verder op deze pagina bespreken we enkele veel voorkomende directives.

Een meer gedetailleerde video over directives vind je hier: https://youtu.be/SLPkP7OL02M

*ngFor

Bestudeer de code van https://stackblitz.com/edit/tmk-ngfor.

Heel vaak bestaat onze data uit een array van strings of uit een array van objecten. In zijn meest eenvoudige vorm ga je met *ngFor alle elementen uit de array met een lus overlopen.
Soms is het ook handig om de index mee te verwerken. Zo kan je de index makkelijk doorgeven van een master-component naar een detail-component. (Zie later.) 


            

            

                
*ngIf

                
Bestudeer de code van https://stackblitz.com/edit/tmk-ngif.
                

                
De tag waarop een *ngIf wordt toegepast, verschijnt enkel als de waarde tussen de
                    aanhalingstekens true is. Bij false verdwijnt de tag volledig uit de DOM.

                    Tussen de aanhalingstekens staat ofwel:

                
    
                    
  1. Een logische vergelijking.
    2. 
                    
  2. De waarde van een booleaanse variabele.
    3. 
                    
  3. De return-waarde (true of false) van een methode.
    4. 
                

                
In bovenstaand voorbeeld wordt de eerste en de derde methode uitgewerkt.

                

            

        

    


    
    

        

            

                
*ngIf (met ng-template)

                
Bestudeer de code van https://stackblitz.com/edit/tmk-ngifelse.
                

                
Een if-else vergelijking kan je perfect met twee *ngIf-blokken maken. Ofwel is
                    het eerste blok true, ofwel is het tweede blok true. (Zie voorgaand voorbeeld.)

                    Er bestaat echter nog een andere methode, namelijk met een ng-template-tag.

                
Geef de template een unieke naam, bijvoorbeeld #oddBlock. Indien de vergelijking false
                    is,
                    wordt oddBlock (hier zonder hekje geschreven!) getoond.

                

            

            

                
[ngSwitch]

                
Bestudeer de code van https://stackblitz.com/edit/tmk-ngswitch.
                

                
ngSwitch toont één element, afhankelijk van de gekozen voorwaarde. Binnen ngSwitch gebruik je
                    één of meerdere keren *ngSwitchCase. Indien geen enkele voorwaarde true is, wordt *ngSwitchDefault
                    zichtbaar.

                

            

        

    


    
    

        

            

                
[ngClass]

                
Bestudeer de code van https://stackblitz.com/edit/tmk-ngclass.
                

                
Het *ngIf voorbeeld is niet de meest ideale oplossing. We tonen immers één van de twee p-tag
                    met nagenoeg dezelfde inhoud en structuur. Enkel de class (alert-success of alert-danger) op beide
                    blokken is verschillend.
ngClass
                    is in dit voorbeeld een elegantere oplossing.

                
Je kan op drie verschillende manieren één of meerdere classes aan een tag toekenen:

                
    
                    
  • Via een string.
    • 
                    
  • Via een array.
    • 
                    
  • Via een object. Op basis van een booleaanse waarde wordt de class al dan niet toegekend.
    • 
                

                
Onderstaand voorbeeld geeft viermaal hetzelfde resultaat. De eerste class alert wordt altijd
                    toegekend. De tweede class alert-success of alert-danger wordt via een berekening
                    toegekend.

                

            

            

                
[ngStyle]

                
Bestudeer de code van https://stackblitz.com/edit/tmk-ngstyle.
                

                
Met ngStyle kan je één of meerdere inline css eigenschappen dynamisch genereren.

                
In onderstaand voorbeeld is de tekstkleur altijd wit en de achtergrondkleur krijgt een waarde uit de
                    rainbow array.