Everything you should know about Styles in Angular

In this article we will talk about

1. How to add styles to components in Angular.
2. Global styles in Angular.
3. What is ViewEncasulation property and how does it effect the Component Styles.

So lets get Started!!!

Component Styles in Angular

To understand this lets quickly create an angular application.
> ng new StylesInNg

Below is the app.component.html and its css file. To this component's span element, a blue color style is added.

Now lets add another component and do the same, except, instead of blue this time lets add red color.

And this is how it looks in the Browser.

See, the app.component header span element is blue in color and the info.component header span element is red in color.
Now look into their styles in the same image.

<style>header[_ngcontent-c0]   span[_ngcontent-c0]{
    color: blue;
}</style>

<style>header[_ngcontent-c1]   span[_ngcontent-c1]{
    color: red;
}</style>

<app-root _nghost-c0="" ng-version="6.1.10">
  <header _ngcontent-c0="">
    <span _ngcontent-c0="">This is the header</span>
  </header>
  <p _ngcontent-c0="">This is some paragraph</p>
  <app-info _ngcontent-c0="" _nghost-c1="">
    <header _ngcontent-c1="">
      <span _ngcontent-c1="">This is the header of Info Component</span>
    </header>
    <p _ngcontent-c1="">This is some paragraph in Info Component</p>
  </app-info>
</app-root>

Notice the attributes _nghost-c0 , _ngcontent-c1, that are present on the header, span elements and on their respective styles. These are attributes that angular uses to isolate component styles from one another. This is called as Emulated Shadow DOM.

In summary, by default all the elements of a component will have a specific attribute given by angular and the same attributes are set to their styles, thereby creating Style Isolation in components.

For a deeper dive on this you can look here.

Global styles in Angular.

Any, .css or .sass style sheet added in the styles[] in angular.json is considered as a global style. By default, styles.css sheet is present in this array.

Some points on Global styles.

1. You can use @import statements in styles.css to add styles sheets to global styles.
2. Adding style sheets in styles[] or in styles.css will make them global and there is no difference between these two.
3. Global styles do not have angular attributes attached to them unlike the component styles.
4. Component styles override the global styles.

ViewEnapuslation.

Lets understand ShadowDom first. Add a date element to info.component and open Chrome Dev Tools > Elements > Settings and check the Show user agent shadow dom option. Inspect the date element in the dev tools.

via GIPHY

Notice, <input type="date"> element has a whole new DOM inside it, this is called Shadow dom.

A parallel DOM created by the browser that encapsulates the markup, style, and behavior (DOM manipulation) of an HTML element.

Angular emulates the shadow dom concept, where it encapsulates the markup, style, and behavior of the component by default and this is called Emulated type of encapsulation.

A component decorator contains a property called encapsulation that sets the ViewEncapsulation value.

There are three modes of encapsulation.

1.ViewEncapsulation.Emulated:[The default value] Angular creates a emulated shadow dom here and isolates the component styles. However, the components can still inherit the global styles in this mode.

2.ViewEncapsulation.Native:In this mode the component does not inherit the global styles and also the component styles are isolated.

3.ViewEncapsulation.None: In this mode the component styles become global and their is no more isolation.

Below is app.component.html code.

<header>This is header</header>
<p>This is paragraph</p>
<app-content>
   <app-info></app-info>
</app-content>

Note, a component cannot inherit styles of its parent. In the above html code the <app-content> component can not inherit the styles of app.component and also <app-info> component can not inherit the styles of <app-content> component