cssangularangular2-hostbinding

Set Angular HostBinding css class to value with function?

I have a component that uses @HostBinding to set a class:

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

Which works fine. However, now I need to create a function in my component to change the class dynamically.

For example, from dark-1 to light-2 when a button in the component is clicked.

I know how to create the function and call it from a button, but how do I change the class in the hostbinding and refresh the UI with the new class?

Solution

  • Sinply give it a property name:

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

    Then you can change it:

    this.isDark = false;

    Or change entire className:

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

this.className = 'light-1';