CODEWITHSUNDEEP
javascriptjqueryangularng-class
Gaurav_0093
Gaurav_0093

Reputation: 1030

ngClass condition is not working on multiple conditions

I am trying to implement [ngClass] based on different conditions here is my 

condition
 [ngClass]="{'validator':lang.VideoURL!=null, 'labeltitle': lang.VideoURL==null}"

but when value of lang.VideoURL is null then labeltitle class is not applying on the page and by default validator class is applying when value of lang.VideoURL is null

Upvotes: 2

Views: 1140

Answers (4)

Mohammadreza Imani
Mohammadreza Imani

Reputation: 340

this is the way to use ngClass multi-condition.

 [ngClass]="{'first-class': condition1,'second-class': condition2}"

Upvotes: 2

ccamac
ccamac

Reputation: 516

Another option is class property binding shown here https://angular.io/guide/template-syntax#binding-targets. This is helpful if you have more than one class that could be valid at a time but which are all conditional.

[class.validator]="lang.VideoURL" [class.labeltitle]="!lang.VideoURL"

Upvotes: 3

Yash Rami
Yash Rami

Reputation: 2317

@porgo's answer is also correct but if you have more condition to check you can try like this.

[ngClass]="[lang.VideoURL != null: 'validator', lang.VideoURL == null: 'labeltitle']"

Upvotes: 3

porgo
porgo

Reputation: 1737

Try: 

[ngClass]="lang.VideoURL ? 'validator' : 'labeltitle'"

Upvotes: 4

Related Questions