In Angular spelen attribuutdirectieven een cruciale rol bij het dynamisch wijzigen van het gedrag en uiterlijk van elementen zonder de structuur van de DOM aan te passen. Twee van de meest gebruikte attribuutdirectieven zijn ngClass en ngStyle. Deze directieven bieden flexibele manieren om stijlen en CSS-klassen van elementen te beheren op basis van de status van de component.

Wat is ngClass?

Dit is vooral handig wanneer je het uiterlijk van een element wilt wijzigen als reactie op gegevenswijzigingen — bijvoorbeeld het markeren van een actief item of het toepassen van stijlen op basis van status.

ngClass ondersteunt objectnotatie, arrays van strings en functies die deze formaten retourneren voor het dynamisch toepassen van klassen.

Objectnotatie

Gebruik een object waarbij de sleutels de klassennamen zijn en de waarden booleaanse voorwaarden. Als de voorwaarde true is, wordt de klasse toegepast.

In dit voorbeeld worden klassen toegevoegd of verwijderd op basis van de waarde van de eigenschap isActive in de component.

Als isActive true is, wordt de klasse active toegevoegd en inactive verwijderd. Als isActive false is, gebeurt het omgekeerde.

Array van Strings

Gebruik een array waarbij elke string een CSS-klassennaam vertegenwoordigt die aan het element wordt toegevoegd. Deze aanpak is handig wanneer je meerdere klassen dynamisch wilt toepassen zonder voorwaarden.

Hier worden de klassen die in de array staan toegepast op het element.

Het gebruik van een array is handig wanneer je dynamisch meerdere klassen wilt toewijzen — vooral wanneer het aantal klassen kan variëren.

Functie

Gebruik een functie die een van de ondersteunde formaten retourneert: een object, een array van strings of een enkele string. Dit is nuttig wanneer de toegepaste klassen afhangen van complexere logica of dynamische voorwaarden.

ngClass kan ook een functie accepteren die een object, array of string retourneert, afhankelijk van de door jou gedefinieerde logica.

In dit geval retourneert de methode getClass() een object met CSS-klassenamen als sleutels en booleaanse voorwaarden als waarden.

• Als isError true is, wordt de error-class toegepast;
• Als isSuccess true is, wordt de success-class toegepast;
• Als beide false zijn, worden er geen klassen toegevoegd.

Wat is ngStyle?

Met ngStyle kunt u eigenschappen zoals achtergrondkleur, lettertype, grootte, positionering en meer wijzigen — allemaal rechtstreeks vanuit de component.

Hoe werkt ngStyle?

ngStyle accepteert een object waarbij de sleutels CSS-eigenschapsnamen zijn en de waarden expressies die tijdens het renderen worden geëvalueerd.

Als een expressie een waarde retourneert, wordt die waarde toegepast op de overeenkomstige CSS-eigenschap van het element.

Voorbeeld met een stijlobject

In dit voorbeeld wijzigen we dynamisch de tekstkleur en het lettertype van het element:

Als textColor gelijk is aan red en fontSize aan 20px, worden deze stijlen toegepast op het element. Deze benadering maakt het mogelijk om eenvoudig meerdere stijlen in één expressie te combineren voor meer flexibiliteit.

Voorbeeld met een Variabele en Expressie

Als u stijlen wilt toepassen op basis van logica, kunt u direct expressies in de template gebruiken:

Als isActive true is, wordt de achtergrondkleur groen; als false, wordt deze rood. Hier wordt een ternary-operator gebruikt om de logica beknopt en duidelijk te maken.

Voorbeeld met een Dynamische Waarde

Expressies in ngStyle kunnen ook gebaseerd zijn op methoden. U kunt componentmethoden gebruiken om stijlwaarden dynamisch te berekenen:

In dit voorbeeld retourneert de methode getDynamicStyle() een stijlobject op basis van de huidige waarde van isDarkMode.

Dit is vooral handig wanneer stijlen afhankelijk zijn van externe omstandigheden zoals gebruikersvoorkeuren, tijdstip van de dag of app-thema's.

Wanneer gebruik je ngClass versus ngStyle?

• Gebruik ngClass bij het werken met vooraf gedefinieerde CSS-klassen. Dit is ideaal wanneer stijlen op meerdere plaatsen worden hergebruikt en je gecentraliseerde stijlcontrole via je stylesheet wilt;

• Gebruik ngStyle wanneer je stijlen dynamisch en direct moet toepassen — bijvoorbeeld bij het instellen van kleuren, afmetingen of andere visuele eigenschappen die niet aan herbruikbare klassen zijn gekoppeld.

Door zowel ngClass als ngStyle te gebruiken, kun je eenvoudig en efficiënt het uiterlijk en gedrag van je elementen regelen op basis van componentgegevens — zonder handmatig de DOM te hoeven bijwerken.