Conditional styling on host element

Question

I have a component that all it does is render , its something like this:

@Component({
     selector: 'my-comp',
     host: ???,
     template: `
         <ng-content></ng-content>
     `
})

 export default class MyComp {
   @Input() title: string;
   public isChanged: boolean;
 }

The component has a isChanged property and I want to apply styling on the host element based on that isChanged property. Is this even possible?

Answer 1

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