Assign classes conditionally in Angular2

angular ng-class
Ramana Sarva picture Ramana Sarva · Aug 28, 2016 · Viewed 46.8k times · Source

I'm trying to conditionally assign a class to a div based on the value I obtained from my back-end system.

Say there is an object 'A' which has a variable status which possibly has values status1 and status2.

I'm trying to assign 2 classes (class1 and class2) conditionally depending on the status using Angular 2. Following is the condition I'm using. Please suggest a working alternative for this,

<div ng-class="{status1 : 'class1', status2 : 'class2'}[A.status]">
   ...
</div>

Answer

eltonkamami picture eltonkamami · Aug 28, 2016

You can bind your object to the [ngClass] directive

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">

almost the same syntax as angular 1. just add the square brackets

Related questions

Angular 2 Doing an else with ngClass

I have the following template : <p [ngClass]="{checked: condition, unchecked: !condition}"> While this is working, I find it a bit ugly as I have to repeat twice the condition. Is there a way to something like : [ngClass]={condition ? …

Read More
give active class onclick in ngFor angular 2

Hi I have unordered list and all of them have active class. I want to toggle active class when clicked to any list item. My code is like this <ul class="sub_modules"> <li *ngFor="let subModule …

Read More
Multiple classes in ngClass

I'm trying to add multiple values in *ngClass, what used to work on previous alpha releases and doesn't seem to work now on angular2 beta: <i *ngClass="['fa','fa-star']"></i> It produces an error: EXCEPTION: TypeError: …

Read More