JavaScript voor beginners: Dynamische klassen toewijzen met ngClass

In web-apps is het een veelvoorkomende vereiste om het uiterlijk van een element aan te passen op basis van een voorwaarde. Er zijn een paar manieren om dit te bereiken, maar als je werkt met Angular, is de keuze duidelijk. De ngClass directive biedt tal van manieren om dynamisch klassenamen toe te wijzen aan elementen of componenten. De syntax is zowel beknopt als ondersteunt toch vrij complexe logica om ons fijnmazige controle te geven over zowel onze klassenamen als de criteria voor het instellen ervan. In deze tutorial zullen we enkele van de meest voorkomende manieren doornemen om dynamisch een CSS-klasse toe te wijzen aan een element met behulp van de ngClass directive.

Het toewijzen van een CSS-klasse met behulp van de [className] Property Binding

Hoewel dit artikel gaat over de ngClass directive, is het vermeldenswaardig dat je het in veel gevallen niet eens nodig zult hebben! Dankzij de [className] property binding kunnen we een klasse instellen via de native JavaScript className eigenschap, met behulp van de [] binding-syntax. We kunnen elke verklaring uitvoeren binnen die binding die resulteert in een string. Dit stelt ons in staat om één of meerdere klassen in te stellen op basis van een voorwaarde:

<div [className]="isActive ? 'active-class' : 'inactive-class'"></div>

We zouden ook de klassenaam op runtime kunnen opbouwen:

<div [className]="'class' + someValue"></div>

Lees: 5 JavaScript Concepten Die Elke Webontwikkelaar Zou Moeten Leren

Klassen wisselen via [className]  Property Binding

Sommigen beschouwen de bovenstaande techniek van klassetoggling als iets ingewikkelder dan nodig is, aangezien de inactive-class waarschijnlijk de standaard zou zijn. Als je tot die groep behoort, kun je de syntax [class.class-name] gebruiken om een voorwaarde te leveren die moet worden geëvalueerd:

<div 
  class="inactive" 
  [class.active]="isActive">
</div>

Dus, als we conditioneel een klasse kunnen instellen met behulp van [className] Property Binding, waarom hebben we dan zelfs de ngClass directive nodig? Zoals we zullen zien, is de echte reden om de ngClass directive te gebruiken dat het ons kan helpen bij het kiezen tussen meerdere klassen.

Een diepe duik in de ngClass Directive

Voordat we ingaan op hoe de ngClass directive moet worden gebruikt, zou het nuttig zijn om naar de definitie te kijken:

@Input('class')
klass: string

@Input()
ngClass: string | string[] | Set<string> | { [klass: string]: any; }

Kijkend naar de bovenstaande code, kunnen we nu zien dat de [class] syntax die eerder is gebruikt, eigenlijk deel uitmaakt van de ngClass directive, via @Input('class'). Let ook op dat de ngClass directive ons niet minder dan vier opties geeft om dynamische klassen in te stellen! 

Laten we elk van deze eens nader bekijken.

Het leveren van een string of string[]

Het toewijzen van een string of een string array aan ngClass stelt ons in staat om dynamische klassen te binden aan Angular variabelen. Stel dat we een variabele hadden genaamd activeClass. Binnen ons .ts-bestand kunnen we deze instellen op een bekende klassenaam zoals "text-success" of "text-failure" op basis van het resultaat van een bepaalde bewerking:

<div 
  [ngClass]="activeClass">
</div>

De array-syntaxis is handig voor het toepassen van meerdere klassen op hetzelfde element of component:

<div 
  [ngClass]="[activeClass, openClass]">
</div>

Het gebruiken van een geëvalueerde expressie

Een ietwat geavanceerde – maar zeer nuttige – methode om ngClass te gebruiken is door een expressie op te geven. De opgegeven klasse wordt alleen toegepast als een variabele of expressie evalueert naar true. Om een expressie te leveren, moet je een object verstrekken met behulp van accolades {}. Links van elke dubbele punt – de eigenschapsnaam – staat de klasse die wordt toegepast; rechts – de eigenschapswaarde – staat de expressie of variabele die je wilt laten evalueren. Hier is een voorbeeld:

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" [ngModel]="redText"> Toggle red text.
<input type="checkbox" [ngModel]="largeFont"> Toggle large text.

<div [ngClass]="{ 'text-red': redText, 'text-large': largeFont }">

Lees: React, Angular, en Vue.js: Wat is het Technische Verschil?

Het Gebruik van de Ternaire Operator

De ternaire operator stelt je in staat om een waarde toe te wijzen aan een variabele op basis van een booleaanse expressie – ofwel een booleaanse veld, of een verklaring die evalueert naar een booleaanse uitkomst. Op zijn meest basisniveau kan de ternaire operator, ook bekend als de conditionele operator, worden gebruikt als een alternatief voor de if/then/else verklaring bij het instellen van een variabele. 

Het toevoegen van de ternaire operator aan ngClass stelt ons in staat om twee verschillende klassen te specificeren: één als een expressie waar is en één voor false. Hier is de basis syntaxis voor de ternaire operator:

[ngClass]="expression or variable ? true class : false class"

Hier is wat code die de ternaire operator gebruikt om de klasse van een DIV in te stellen afhankelijk van of twee variabelen gelijk zijn of niet:

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

De Set ngClass Handtekening: Ongewenst en Onbemind

Set is een nieuwe gegevensstructuur geïntroduceerd in ES6, vergelijkbaar met Map. Een TypeScript Set stelt ons in staat om unieke waarden op te slaan in een lijst met behulp van methoden zoals add(), has() en delete(). Om welke reden dan ook, de Set<string> ngClass handtekening is nooit echt populair geworden. Ik heb het nooit gebruikt, noch ken ik iemand die dat wel heeft.

Met dat gezegd hebbende, zou de Set strings moeten bevatten die klassen vertegenwoordigen om toe te passen op het element of component. Hier is wat TypeScript-code die een Set met de naam classes maakt:

//Declareer een klasse-lidvariabele
public classes = new Set();
 
//Voeg klassen toe
classes.add('active').add('text-large');

Conclusie

In deze tutorial hebben we enkele van de meest voorkomende manieren doorgenomen om dynamisch een CSS-klasse toe te wijzen aan een element met behulp van de ngClass-directive. Zoals je kunt zien, is het behoorlijk krachtige spul.