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 ?

Yordan Nikolov · Accepted Answer · 2017-07-05 10:28:15Z

17

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

answered Jul 5, 2017 at 10:28

Yordan Nikolov

2,67815 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexis Facques Over a year ago

Works like a charm (just as Skeptor's answer). Thanks guys !

Vamshi · Accepted Answer · 2017-07-05 11:37:07Z

9

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 5, 2017 at 11:37

Vamshi

9,3615 gold badges41 silver badges55 bronze badges

2 Comments

Tohnmeister Over a year ago

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.

Antoine Boisier-Michaud Over a year ago

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.

Collectives™ on Stack Overflow

Conditional @HostBinding depending on @Input()

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related