Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

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

    Juri StrumpflohnerJuri Strumpflohner

    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.

    angularAngular
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss