Use Angular’s @HostBinding and :host(...) to add styling to the component itself
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.
[00:00] Usually, when we want to style our component, what we have to do is to define within our styles property the according CSS class, which we can then apply to some element within our component.
[00:12] However, if we take a look, what happens here is obviously that the style gets applied to that div that resides within our component tag. You can see here that whole styling tag, which represents our component.
[00:25] For some scenarios, however, what we really want is that the class gets applied directly to that host styling tag of our component, rather than to some inner kind of element. Our first approach would be to simply to go to the point where we define our component here, and to add there that yellow style class.
[00:47] Let's save this. Let's also remove that class from the inner HTML element. What you can see here is that the actual style doesn't get applied to our div. While the class is obviously there, there is no kind of style injected.
[01:03] The problem here is that this style is directly scoped to that component, so it doesn't leak outside. For this purpose, we can use a special meta tag called host, and wrap our style with that kind of meta tag. With this tag, we can define that our style, the yellow style class here, should be applied to the host of our component, that host styling tag.
[01:30] If we save again, we can see how the style gets applied. In fact, the class obviously still there. You now note that special tag that has been dynamically applied by Angular, which is then used for scoping our style.
[01:45] Now, this was actually quite a simple example, as we applied the style statically, directly on our host element. Most often, however, we want to control from the inside of our component whether that style gets applied to that host element or not.
[01:59] For doing so, we can import the host binding, always from the Angular core. This now gives us the possibility to specify a host binding to the class element, and specific to our yellow style.
[02:21] You can already see that here, we can basically specify a variable that indicates whether the style should be applied or not. We can now simply add here a button with a click listener, which simply toggles our yellow style.
[02:49] Now, as you can see, we can switch the style on and off, and you can also see how it gets added or removed on our host element.