Styles Between Components in Angular 2+

Published on October 26, 2016


Styles Between Components in Angular 2+

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

With Angular 2+, component styles are protected and won’t bleed unto other components by default. That’s thanks to the View Encapsulation with Shadow DOM or Shadow DOM emulation. There are still ways however to play around and have a component’s style interact with it’s surrounding with :host, :host-context and /deep/ (now ::ng-deep). There’s also a way to change the behavior for the view encapsulation:


You can use the special :host pseudo-class selector to apply styles in the host component’s template, the one that parent to the current component:

:host {
  background-color: #545454;
  color: white;
  font-size: 1.5em;

Specify a selector with :host(selector) to apply the styles only of the selector is present in the host component. In this example the styles are only applied if the host has a .dark class:

:host(.dark) {
  background-color: #545454;
  color: white;
  font-size: 1.5em;


With :host-context you can apply styles to the current component based on a condition of any component or html element that’s above itself in the component tree. A common use case is to apply styles if for example a certain class is present on the body element. This is really useful for theming.

In the following example the span elements with class .info will get styled only if a .deep-purple is found somewhere upstream:

:host-context(.deep-purple) span.info {
  border: 3px solid hotpink;
  border-radius: 12px;


With ::ng-deep, styles will be applied to the current component, but also trickle down to the components that are children to the current component in the component tree.

Prior to Angular 4.3, /deep/ or >>> was used instead of ::ng-deep. Both notations have been deprecated by browsers, so ::ng-deep is now the temporary workaround.

In the following example span.info with be style in the current component and it’s children components:

::ng-deep span.info {
  border: 3px solid hotpink;
  border-radius: 12px;

All these pseudo-classes can also be combined for maximum control:

:host-context(.deep-purple) ::ng-deep span.info {
  border: 3px solid hotpink;
  border-radius: 12px;

View Encapsulation

The view encapsulation can be set to either Native, Emulated (the default) or None in the component’s decorator like this:

  selector: 'my-app',
  encapsulation: ViewEncapsulation.None
  • Native uses the browser’s native Shadow DOM capabilities. The browser support is still very limited for native support.
  • Emulated is the default behavior and uses an emulated Shadow DOM. It’s most appropriate now because of the majority of common use browsers not supporting Shadow DOM.
  • None doesn’t apply any view encapsulation and styles applied to one component will also have a global effect on the whole app.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

About the authors
Default avatar


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel