Условно применить класс к хосту компонента

Question

Я пытаюсь применить класс к тегу компонента, только если что-то верно.

Как я могу превратить этот хост в условный хост, чтобы при необходимости применять желаемый класс?

@Component({
  selector: 'k-sidebar',
  host: {
   class: '{{isChanged}}'
 },
 templateUrl: './ng-k-side-bar.component.html',
 encapsulation: ViewEncapsulation.None

})

Answer 1

если 'my-class' - это имя класса, вы устанавливаете его следующим образом

@Component({
  selector: 'k-sidebar',
  host: {
   '[class.my-class]': 'isChanged'
 },
 templateUrl: './ng-k-side-bar.component.html',
 encapsulation: ViewEncapsulation.None
})
export class MyComponent {
  isChanged = true;
}

Answer 2

Вы можете установить класс элемента хоста условно с помощью @HostBinding:

condition: boolean = true;

@HostBinding("class") private get hostClass(): string {
  return this.condition ? "redBorder" : "";
}

или для определенного c имени класса (например, redBorder):

@HostBinding("class.redBorder") private get hasRedBorder(): boolean {
  return this.condition;
}

Посмотрите эти две демонстрации: stackblitz 1 , stackblitz 2 .