Dynamic CSS Classes in Angular2+

Question

HTML:

<div *ngFor="let record of lift" class="list-lifts" [class.showLifts]="isBtnActive">

Component:

isBtnActive: boolean = false;

toggleClass() {
    this.isBtnActive = !this.isBtnActive;
  }

CSS:

.list-lifts {

  &:not(:first-of-type) {
    margin-top: -11px !important;
    display: none;
  }
}

.showLifts {
  display: block !important;
}

// I need something like this to be built in the view:
.ValueshowLifts {}

The toggleClass() function toggles the CSS class .showLifts on the click of a button. This works great.

The issue is, I need the class .showLifts to have a dynamic name and I'm not sure what the syntax is to produce it. For logical reasons, here's an example:

[class.{{ record.name }}showLifts]="isBtnActive"

But of course this isn't valid syntax.

Answer 1

You can leverage ngClass directive here

[ngClass]="showLiftsClass"

Inside your code you can dynamically add css classes to it as follows,

showLiftsClass = {
      'record1showLifts' : true,
      'record2showLifts' : false,
      'record3showLifts' : false,
      'record4showLifts' : false
      ...
}

You can have single or multiple classes as a true. Value true will add the class to the DOM element.

Answer 2

<div class="form-group label-floating" 
    [ngClass]="{'is-empty': true, 'second-class' : true}"></div>