October 5, 2018

Angular 2 – Set Class of parent element with @HostBindings

6 Comments

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. –

  isActive:boolean;
  @HostBinding('class.isActive') isActiveAsMethod(){
    return this.isActive;
  };

isActive:boolean;

@HostBinding('class.isActive') isActiveAsMethod(){

return this.isActive;

};

  @HostBinding('class.isActive') isActive:boolean;

1	@HostBinding('class.isActive') isActive:boolean;

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

  @HostBinding('class.isActive')
  @HostBinding('class.current') isActive:boolean;

1 2	@HostBinding('class.isActive') @HostBinding('class.current') isActive:boolean;

Usage in scss

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

:host {
  &.isActive {
    background-color: red;
  }
}

:host {

&.isActive {

background-color: red;

}

b) String property

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

@HostBinding('class') class = 'box';

1	@HostBinding('class') class = 'box';

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

<p>
  box works!
</p>
<button (click)="click()">Toggle</button>

<p>

box works!

</p>

<button (click)="click()">Toggle</button>

:host {
  width: 200px;
  height: 200px;
  display: block;
  background-color: blue;
  padding: 20px;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  &.isActive {
    background-color: red;
  }
}

:host {

width: 200px;

height: 200px;

display: block;

background-color: blue;

padding: 20px;

color: #ffffff;

text-align: center;

font-weight: bold;

&.isActive {

background-color: red;

}

import {Component, HostBinding, OnInit} from '@angular/core';

@Component({
  selector: 'app-box',
  templateUrl: './box.component.html',
  styleUrls: ['./box.component.scss']
})
export class BoxComponent implements OnInit {

  @HostBinding('class.isActive') isActive: boolean;
  @HostBinding('class') class = 'box';

  constructor() {}

  ngOnInit() {  }

  click() {
    this.isActive = ! this.isActive;
  }
}

import {Component, HostBinding, OnInit} from '@angular/core';

@Component({

selector: 'app-box',

templateUrl: './box.component.html',

styleUrls: ['./box.component.scss']

})

export class BoxComponent implements OnInit {

@HostBinding('class.isActive') isActive: boolean;

@HostBinding('class') class = 'box';

constructor() {}

ngOnInit() { }

click() {

this.isActive = ! this.isActive;

}

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

How to optimize performance of large lists in angu...

What we learned in 1 year of Angular 2 trainings

Angular 11: Hot Module Replacement

theCodeCampus
Developer at thecodecampus </>

Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.

Follow me on LinkedIn

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

Efi says:

16.05.2017 at 12:08

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

Peter Kristensen says:

08.08.2017 at 11:52

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:
  
  09.08.2017 at 07:21
  
  Pardon, you are right this was a typo (fixed). Thanks for your comment!
  
  Fyi: another way of writing would be .host(.isActive)
  
Aico Klein Ovink says:

11.01.2019 at 16:58

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

isActive:boolean; @HostBinding('class.isActive') get isActiveAsGetter() { return this.isActive; };

1
2
3
4
5
6
7

isActive:boolean;

@HostBinding('class.isActive')
get isActiveAsGetter() {
return this.isActive;
};

noko says:

02.09.2019 at 20:27

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

Jago says:

04.05.2020 at 17:47

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

will *NOT* work.