Установить класс Angular HostBinding css в значение с помощью функции?

Question

У меня есть компонент, который использует @HostBinding установить класс:

@HostBinding('class.dark-1') true;

Который работает отлично. Однако теперь мне нужно создать функцию в моем компоненте для динамического изменения класса.

Например, из dark-1 в light-2 когда кнопка в компоненте нажата.

Я знаю, как создать функцию и вызвать ее с помощью кнопки, но как мне изменить класс в привязке хоста и обновить пользовательский интерфейс новым классом?

Answer 1

Sinply дать ему имя свойства:

@HostBinding('class.dark-1') isDark = true;

Тогда вы можете изменить это:

this.isDark = false;

Или измените весь className:

@HostBinding('class') className = 'dark-1';

this.className = 'light-1';

Answer 2

Вы можете переключать clicked установите флажок при нажатии кнопки и установите классы с помощью получателей:

@HostBinding("class.dark-1") public get classDark1() {
    return !this.clicked;
}

@HostBinding("class.light-2") public get classLight2() {
    return this.clicked;
}

private clicked = false;

public onClick() {
    this.clicked = true;
}