Angular 2 Как добавить класс только тогда, когда есть изменения или что-то происходит

Вы совершенно правы. ngOnChanges() Хук жизненного цикла срабатывает при каждом изменении любых атрибутов @Input().

Например,

В вашем основном компоненте

<app-child-component [childData]="childData"> Some Text </app-child-component>

 this.service.getData().subscribe((data)=>{
    this.childData = data;
});

Момент изменения значения childData

ngOnChanges(changes: SimpleChanges){
    if(this.childData){
        //when value is present 
        this.assignSomeClass();
    }
}
assignSomeClass(){
    ///your code for ngClass
}

Примечание. Дочерний компонент должен иметь @Input() childData:any[]

Использование :host(..) и @HostBinding

Представьте, что у вас есть компонент, к которому вы хотели бы применять разные классы CSS на основе некоторых настроек, например .yellow-style, если вы указываете, и .red-style, если вы передаете красный: .

Здесь важно отметить, что, в отличие от того, что мы делали до сих пор, мы хотим, чтобы класс CSS применялся не к некоторому элементу, который является внутренним для нашего компонента, а к самому компоненту. Пример:

<styled style="red" _nghost-c0="" ng-reflect-style="red" class="red-
style">
    <div _ngcontent-c0="">
      I'm a div that wants to be styled
    </div>
</styled>

Тем не менее, в целях повторного использования наши стили должны поставляться с самим компонентом, поэтому мы снова используем свойство стилей нашего StyledComponent:

@Component({
  selector: 'styled',
  template: `
    <div>
      I'm a div that wants to be styled
    </div>
  `,
  styles: [
    `
      :host(.yellow-style) {
        background-color: yellow;
        border: 1px solid black;
        display:block;
      }

      :host(.red-style) {
        background-color: red;
        border: 1px solid black;
        color: white;
        display:block;
      }
    `
  ]
})
export class StyledComponent { }

Как видите, мы используем специальный селектор :host(...) для выбора стилей элемента, в котором размещается компонент. Больше информации об этом в официальных документах. Таким образом, .yellow-style и .red-style будут видны на уровне основного компонента, в то время как в противном случае они были бы инкапсулированы и применимы только к элементам внутри нашего StyledComponent.

Затем мы определяем свойство @Input(), которое позволяет нам передавать конфигурацию стиля.

@Component({...})
export class StyledComponent {
    @Input() style;
}

Чего нам все еще не хватает, так это программно установить класс CSS для нашего хост-элемента на основе значения свойства ввода стиля. Для этого мы используем @HostBinding:

import { Component, Input, HostBinding } from '@angular/core';

@Component({ ... })
export class StyledComponent {
  @Input() style;

  @HostBinding('class.yellow-style') yellowStyle:boolean = false;
  @HostBinding('class.red-style') redStyle:boolean = false;

  ngOnChanges(changes) {
    let newStyle = changes.style.currentValue;

    if(newStyle === 'yellow') {
      this.yellowStyle = true;
      this.redStyle = false;
    } else if(newStyle === 'red') {
      this.yellowStyle = false;
      this.redStyle = true;
    } else {
      // nothing here.. (fallback?)
    }
  }
}

В ngOnChanges мы изменяем свойство ввода стиля, мы правильно настраиваем наши флаги стиля. (Обратите внимание, что это далеко не самый интеллектуальный код, но он достаточно прост, чтобы вы поняли идею :wink:).

ТЕКСТ ОТ: https://juristr.com/blog/2016/01/learning-ng2-dynamic-styles/ ТАМ ВСЕ ДОСТОИНСТВА. СОБИРАЕТСЯ ДЛЯ РАСПРОСТРАНЕНИЯ. ТАКЖЕ У ВАС ЕСТЬ ПРИМЕР ИГРЫ НА САЙТЕ.