Use :host-context and the ::ng-deep selector to apply context-based styling

Share this video with your friends

Send Tweet

Often components need to be styled based on the context they are being placed in. In this lesson we will learn about how to apply styles conditionally to our component, based on our ancestor element styles using :host-context. In the very same way, we also explore how to leverage the /deep/ shadow DOM selector to target styles to child components.

Note that the ::ng-deep is only a temporary solution and is going to be dropped by Angular once there’s an official standard coming out. As such try to avoid using it.

Nadav
Nadav
~ 7 years ago

The use of /deep/ is deprecated according to the official documentation.. I think you should at least mark it.. https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Juri Strumpflohner
Juri Strumpflohner(instructor)
~ 7 years ago

@Nadav Yep, your right, I just didn't manage to update in time. But I just uploaded a new video now that mentions this issue :) thx for highlighting this!

Nadav
Nadav
~ 7 years ago

Awsome! Thank you for the really fast update :)