angulartypescriptangular2-hostbinding

Conditional @HostBinding depending on @Input()


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 ?


Solution

  • 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() {
            }
        }