I'm trying to bind the CSS class foo
to my host component, using @HostBinding
depending on a test I do on a dynamic variable.
But can't manage to make it work properly.
Here's what I already tried:
export class MyComponent {
@Input()
public input: string;
@HostBinding('class.foo')
public isFoo: Boolean = this.inputIsCorrect();
constructor() {
}
private inputIsCorrect(){
return (this.input != 'not correct');
}
}
How I could make it work ? I was maybe thinking of way to listen to input
changes ?
Try this way. Make @Input property getter/setter and set the isFoo
from the setter.
export class MyComponent {
@Input()
public get input (): string {
return this._input;
}
public set input (val: string) {
this._input = val;
// when the input is set check it and set isFoo;
this.isFoo = (val != 'not correct');
}
@HostBinding('class.foo')
public isFoo: Boolean = false; // false is init value
constructor() {
}
}