Using Angular @HostBinding inside directive to set and update attribute values on host

Question

So, let's say I have the following directive:

<div foo></div>

import { Directive, HostBinding } from '@angular/core';

@Directive({
    selector: '[foo]'
});

export class FooDirective {
    x: number;

    constructor() {
        this.x = 100;
    }

    @HostBinding('style.left.px')
    styleLeftPx: number = this.x;
}

If I render this as is, it appears not to work because this.x gets its value after @HostBinding has initialized.

So, changing the above to something more like this:

...

x: number = 100;

constructor() {}

...

And setting that value outside of the constructor, the value is added with no issue.

However, if I try to change that value at any point, for example with a timeout:

...

x: number = 100;

constructor () {
    setTimeout(() => {
        this.x = 200;
    }, 2000)
}

...

The host attribute does not update to the new value. Is there no data binding going on here after the initial init? There are lots of answers here on stack discussing how to set the initial value of an attr using @HostBinding, but what about changing that value after init?

score 3 · Answer 1 · answered Aug 09 '17 at 15:54

I figured out where I was going wrong.

It should be like this:

<div foo></div>

import { Directive, HostBinding } from '@angular/core';

@Directive({
    selector: '[foo]'
});

export class FooDirective {
    @HostBinding('style.left.px')
    x: number = 100;

    constructor() {
        setTimeout(() => {
            this.x = 200;
        }, 2000); 
    }
}

Looks like I was misunderstanding the syntax surrounding this approach.

Using Angular @HostBinding inside directive to set and update attribute values on host

1 Answers1