Использование Angular @HostBinding внутри директивы для установки и обновления значений атрибутов на хосте

Question

Итак, допустим, у меня есть следующая директива:

<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;
}

Если я сделаю это как есть, то это не сработает, потому что this.x получает свое значение после @HostBinding инициализировал.

Итак, изменив вышесказанное на что-то вроде этого:

...

x: number = 100;

constructor() {}

...

И устанавливая это значение вне конструктора, значение добавляется без проблем.

Однако, если я попытаюсь изменить это значение в любой момент, например, с таймаутом:

...

x: number = 100;

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

...

Атрибут хоста не обновляется до нового значения. Не происходит ли привязка данных здесь после начальной инициализации? В стеке есть много ответов о том, как установить начальное значение атрибута с помощью @HostBinding, а как насчет изменения этого значения после init?

Answer 1

Я понял, где я иду не так.

Должно быть так:

<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); 
    }
}

Похоже, я неправильно понял синтаксис этого подхода.