Angular 4 ViewEncapsulation: Scoping Your Styles

This page will guide you over Angular 4 ViewEncapsulation.

First of all, what is ViewEncapsulation?

The view encapsulation will decide that the template and styles defined within the component can affect the whole application or vice versa.

Basically, view encapsulation has the control to use styles globally or limit it within a particular component.

3 strategies of Angular 4 ViewEncapsulation

  • Emulated (default) – Emulated, is the default strategy of Angular 4 ViewEncapsulation. Styles defined for that component (under the @Component decorator) are scoped to this component only.
  • Native – With Native, styles defined in this component (i.e. @Component decorator) are scoped to this component only. It requires a feature (i.e. shadow DOM) which is not supported by all browsers.
  • None – With None option, styles will visible to all components on the page. Basically, styles defined in this component with None will be applied to all over the application globally.

Angular, by default, encapsulate the styles for our components, that means that they don’t leak out and affect the rest of the application.

Now, let’s drive Angular 4 ViewEncapsulation with an example to understand.

1. Set up of your project

Are you a beginner in Angular 4? Take me to Angular 4 Hello World

ng new angular4-viewencapsulation

Apply the bootstrap in your Angular 4 App, if you need.

How I can use bootstrap with Angular 4 App? Use Bootstrap With Angular 4 Forms

Furthermore, do you want to understand the basics of Angular 4 before diving deep into Angular 4 ViewEncapsulation? A Dive In Angular 4 Basics

Next, create a child component

ng g c child

Now, you all set with set up. Basically, we’ve two components parent and child.

Before starting, just go through the project directory structure once.


Angular 4 ViewEncapsulation - Project Directory Strucure

2. The difference between Emulated and None

2.1 Firstly we’ll see the default ViewEncapsulation for App Component

Let’s see the HTML of App Component, path is src/app/app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div class="container">
  <h2>
    Welcome to {{title}}!
  </h2>
  <div class="row">
    <div class="col-md-6">
      <p>This is Parent</p>      
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <app-child></app-child>
    </div>
  </div>
</div>

Furthermore, let’s see the CSS of App Component.

p{
background-color: red;
}

In a normal scenario, the above CSS should apply to all over the application as everything is in single view page in a browser. Correct? Now, let’s see!

By default, the ViewEncapsulation is Emulated (nothing change required), see your output!

Angular 4 ViewEncapsulation - Emulated

Strange?

Why doesn’t it apply the CSS to all over the application? Right, you can see that the parent component doesn’t leak his styles out of this component.

Now, we can explicitly set the encapsulation strategy using the encapsulation property.

Let say, for this example, we will use None for ViewEncapsulation

App Component, path is src/app/app.component.ts

//Import ViewEncapsulation
import { Component, ViewEncapsulation} from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
//Apply None to ViewEncapsulation
encapsulation: ViewEncapsulation.None
})

export class AppComponent {
title = 'Angular 4 ViewEncapsulation App';
}

Now, we’ll see the output.

Furthermore, you can see that the CSS applied in parent component has been applied to all over the application.


Angular 4 ViewEncapsulation - None - App Component

2.2 Next, let’s check the vice versa with child component.

HTML of child component, path is src/app/child/child.component.html

<p>
  This is child
</p>

Applied the CSS for child component, path is src/app/child/child.component.css

p{
background-color: green;
}

See the difference on below output

You can see that child component doesn’t leak its styles but you can also make it none to apply globally.


Angular 4 ViewEncapsulation - Emulated - Child Component

Now, Let’s try with None for Child Component, path is src/app/child/child.component.ts

//Import ViewEncapsulation
import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css'],
//Import None propery
encapsulation: ViewEncapsulation.None // Emulated, Native can be used
})
export class ChildComponent implements OnInit {

constructor() { }

ngOnInit() {
}

}

Now, you can see that child component CSS applied all over the application.


Angular 4 ViewEncapsulation - None - Child Component

I hope you understand the difference between default Emulated and None properties of Angular 4 ViewEncapsulation.

3. Finally, let’s see what is Native?

Native works as similar as Emulated but Native is useful for shadow DOM.

Angular Web Components are using core feature of web components, which is the shadow DOM.

Moreover, The shadow DOM lets us include styles into Web Components without letting them leak outside the component’s scope.

To conclude, I’d say be careful while using styles in Angular 4.

Use of Angular 4 ViewEncapsulation will help you out throughout the application.

To conclude, this article contains the understanding for,

  • What is ViewEncapsulation?
  • Types of properties of ViewEncapsulation
  • Difference between Emulated and None
  • What is Native, And how it works?

Moreover, I hope that now you have got an understanding of the concept of Angular 4 ViewEncapsulation.

Feel free to share your suggestions/questions by hitting your valuable comments right under this article.

Happy Coding!

Mohit Tanwani

Mohit Tanwani is an enthusiast Techie, a blogger, and IT geek. He has been crazily involved in the industry for 5 years.

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of