angular - @HostBinding condițional în funcție de @Input()


Încerc să atașez clasa CSS foo componentului meu gazdă, folosind @HostBinding în funcție de un test pe care îl fac pe o variabilă dinamică. Dar nu reușesc să fac să funcționeze corect.
Iată ce am încercat deja:

export class MyComponent {
    @Input()
    public input: string;

    @HostBinding('class.foo')
    public isFoo: Boolean = this.inputIsCorrect();

    constructor() {
    }

    private inputIsCorrect(){
        return (this.input != 'not correct');
    }
}

Cum aș putea să fac să funcționeze? Poate mă gândeam la o modalitate de a asculta schimbările input?

Răspuns #1

Încearcă în acest fel. Creează un getter/setter pentru proprietatea @Input și setează isFoo din 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() {
        }
    }

Răspunsul #2

Ceea ce ai făcut este aproape corect :

export class MyComponent {
    @Input()
    public input: string;

    @HostBinding('class.foo')
    public get isFoo(): Boolean {
        return this.input !== 'not correct';
    }

}