Conditional @HostBinding depending on @Input()

Question

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 ?

score 14 · Accepted Answer · answered Jul 05 '17 at 10:28

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

Works like a charm (just as Skeptor's answer). Thanks guys ! — Alexis Facques, Jul 05 '17 at 12:17

score 6 · Answer 2 · answered Jul 05 '17 at 11:37

6

What you did is almost correct :

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

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

}

answered Jul 05 '17 at 11:37

Vamshi

9,194
4
38
54

Although I find this solution to appear more idiomatic, it doesn't seem to work. The class, when using a get function, will always be set. – Tohnmeister Nov 29 '19 at 10:14
This solution might cause performance issues. `isFoo` will be evaluated on each change detection cycle since it is a getter and Angular can't know if its value has changed. @Yordan's answer solves this issue. – Antoine Boisier-Michaud Apr 21 '20 at 13:48

Conditional @HostBinding depending on @Input()

2 Answers2

Linked