Use Angular’s @HostBinding and :host(...) to add styling to the component itself

Share this video with your friends

Send Tweet

One thing that we can do is to add styles directly to HTML elements that live within our component. However, in this lesson we see that style classes added to your template HTML within your component get applied to an inner <div> and not your component host. We will learn how to use :host(...) and @HostBinding to add styling directly to the component host itself.

Ebuka Udeani
Ebuka Udeani
~ 5 years ago

<app-host-styling _nghost-bxv-c0="" ng-version="8.2.5"><div _ngcontent-bxv-c0="" class="yellow-style"> I'm a div that wants to be styled </div></app-host-styling>

Juri this is what i get in my console