:host-context selector

This is the documentation for Angular 6.
You can switch to the latest version Angular 7.

Sometimes it's useful to apply styles based on some condition outside of a component's view. For example, a CSS theme class could be applied to the document <body> element, and you want to change how your component looks based on that.

Use the :host-context() pseudo-class selector, which works just like the function form of :host(). The :host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root. The :host-context() selector is useful when combined with another selector.

The following example applies a background-color style to all .demo elements inside the component, only if some ancestor element has the CSS class theme-light.

Source
demo.component.css
.demo {
  border: 1px solid #666;
}

:host-context(.theme-light) .demo {
  background-color: #eef;
}
demo.component.html
<div class="demo">Demo block</demo>
index.html
<!doctype html>
...
<body class="theme-light">
  <app-root></app-root>
</body>
</html>
Result
Demo block