CODEWITHSUNDEEP
angularrenderingclassname
aRtoo
aRtoo

Reputation: 1892

conditional rendering of class name in angular

I'm new to angular and I had this problem last 2 day on how to concatenate dynamic class name in angular 2. Like this code in react.js className=this-is-a-str${isFoo? 'add this' : 'then this'} something like that in angular. heres my code in anguar.

[className]="getDesignStatus(design).hasError ? 'project--btn btn btn-action btn-danger-invert col-md-3 col-lg-3' : 'project--btn  btn btn-action btn-primary-invert col-md-3 col-lg-3'"

the string that only changing is these 2 btn-danger-invert && btn-primary-invert

Upvotes: 0

Views: 591

Answers (1)

Arif
Arif

Reputation: 1643

Just rename className to ngClass and add static classes using regular html class attribute

<div 
  class="project--btn btn btn-action col-md-3 col-lg-3" 
  [ngClass]="getDesignStatus(design).hasError ? 'btn-danger-invert' : 'btn-primary-invert'"
></div>

Upvotes: 2

Related Questions