Set Angular HostBinding css class to value with function?

Question

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?

Martin Parenteau · Accepted Answer · 2018-04-17 17:05:21Z

2

You can toggle a clicked flag when clicking the button, and set the classes with getters:

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

answered Apr 17, 2018 at 17:05

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

Comments

funkizer · Accepted Answer · 2018-04-17 17:05:31Z

0

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

answered Apr 17, 2018 at 17:05

funkizer

4,9271 gold badge21 silver badges21 bronze badges

2 Comments

roberto tomás Over a year ago

can you do a similar thing with attributes that might contain a value?

funkizer Over a year ago

For any attribute you can do @HostBinding('attr.data-my-attribute') myDataAttr = 'value'; Having said that, I don't know why you would want to do this with Angular. :) Maybe if you're making a web-component that's to be used outside an Angular app, then yes, otherwise I see no reason...

Collectives™ on Stack Overflow

Set Angular HostBinding css class to value with function?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related