ngClass работает только один раз, основываясь на условии, как применить класс, используя непрерывно меняющееся значение

Question

Я пытаюсь применить условный класс, основанный на дочернем значении, которое постоянно меняется. Этот класс работает нормально, основываясь на значении по умолчанию, но если значение изменилось, я тоже хочу изменить класс. <div [ngClass]="{'myClass': applyClass== true" >

Answer 1

Вы можете динамически назначать класс, используя привязку свойства.

<div [class.foo]="isActive"></div>

Где foo - это класс css, а isActive - это изменяемая вами переменная.

Answer 2

Просто используйте [ngClass]. Как то так:

<div [ngClass]="{'classToBeApplied': applyClass}">
  This is a div
</div>

<button (click)="toggleApplyClass()">
  Toggle Apply Class
</button>

ComponentClass:

export class AppComponent  {
  applyClass = false;

  toggleApplyClass () {
    this.applyClass = !this.applyClass;
  }

}

Компонент CSS:

.classToBeApplied {
  background: red;
}

Вот Образец StackBlitz для вашей ссылки.

Answer 3

Вы можете достичь так же, как это:

<div [ngClass]="{'myClass': applyClass == true, 'changedClass': applyClass == false" >

Или вот так:

<div [class.myClass]="applyClass == true" [class.changedClass]="applyClass == false" >