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