conditional rendering of class name in angular

Question

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

Arif · Accepted Answer · 2019-02-22 16:09:22Z

2

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>

answered Feb 22, 2019 at 16:09

Arif

1,6419 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aRtoo Over a year ago

holy crap dude. you saved a life! thank you so much!

Arif Over a year ago

No worries, mate :)

Collectives™ on Stack Overflow

conditional rendering of class name in angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related