Conditional styling on host element

Solution using @HostBinder

The accepted solution is using the host metadata property which goes against the rules of TSLint:

TSLint: Use @HostBinding or @HostListener rather than the host metadata property (https://angular.io/styleguide#style-06-03)

The same can be achieved using @HostBinding instead:

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

@Component({
  selector: 'my-comp',
  template: `
    <ng-content></ng-content>
  `
})
export default class MyComp {
  @Input() title: string;
  public isChanged: boolean;
  @HostBinding('class.className') get className() { return this.isChanged; }
}

You use the class and style prefix for this. Here is a sample:

@Component({
  selector: 'my-comp',
  host: {
    '[class.className]': 'isChanged'
  },
  template: `
    <ng-content></ng-content>
  `
})
export default class MyComp {
  @Input() title: string;
  public isChanged: boolean;
}

See the Günter's answer for more details:

• ngClass in host property of component decorator does not work