October 5, 2018

Angular 2 – Set Class of parent element with @HostBindings

With the @HostBinding() annotation, Angular gives you a useful tool to handle manipulations of css classes of parent Elements.
The advantage is quite clear, the required logic remains in the components class and is not set in the template file. This makes it easier to test and improves the readability of the template file. In addition, it is the only way to set the CSS class of the host element from within the component.

How to use @HostBinding()?

a) Boolean property

The @HostBinding() annotation can be used on a boolean property of the component class, or on a method returning a boolean. The boolean value determines whether the class is set or not. If the value/return is true, the class will be applied to the parent component’s DOM Element.

The class to be set is specified within the round brackets, prefixed by class.

It is also possible to specify several classes by combining multiple annotations.

Usage in scss

Since the class is added to the host element it is necessary to use the :host-selector in your scss file

b) String property

Additionally, you can set a class directly from a string property to the host component.

I’ve attached a full example with SCSS styles for the toggled class:

This post has been reviewed and checked for compatibility with the latest Angular Version, it was originally created in Feb 2017!

Related Posts

Avatar photo

Admin Admin
Developer at thecodecampus </>


6 responses to “Angular 2 – Set Class of parent element with @HostBindings”

  1. Efi says:

    is this.isActive = !this.isActive;
    no this.isActive =! this.isActive;

  2. Peter Kristensen says:

    For me, it’s not working with the provided SCSS syntax for adding style to the host element with class .isActive. If I’m not wrong, you specify style for all SUB element with this class. Instead, add the “&” sign like this:
    :host {
    &.isActive {

    }
    }

    • Can Kattwinkel says:

      Pardon, you are right this was a typo (fixed). Thanks for your comment!

      Fyi: another way of writing would be .host(.isActive)

  3. Aico Klein Ovink says:

    You should use a getter instead of a method. When using a method the css classes will always be set.

    Here an example, this will work

  4. noko says:

    @Aico Klein Ovink
    Why is it always set when using a normal method?

  5. Jago says:

    Using @HostBinding('class') class = 'box' prevents extra classes being applied to your . So that

    will *NOT* work.

Leave a Reply

Add code to your comment in Markdown syntax.
Like this:
`inline example`

```
code block
example
```

Your email address will not be published.