Geek Culture
Published in

Geek Culture

View Encapsulation in Angular

Understanding how View Encapsulation work in Angular?

View Encapsulation in Angular
View Encapsulation in Angular

Angular Components are made up of 3 things mainly:

  1. Components Class
  2. Template
  3. Style

I have mentioned my AppComponent to have style from the app.component.css file. Also, it's user-choice to mention ViewEncapsulation.Emulated to not, being the default property provided by Angular.

import { Component, ViewEncapsulation } from '@angular/core';@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.Emulated
})
export class AppComponent {
title = 'parent component';
}

In the below appcomponent.css file, we have added a blue colour for the p tag so that all the p tags used in the AppComponent HTML template will show up in blue colour.

p {
color: blue;
}

Now, I have added below an AppChildComponent which will be a child component to my AppComponent. You might think that the styling added to the parent component must also reflect in the child component as we did not add any specific styles to it. So If I am using a p tag in AppChildComponent it should also appear in blue colour.

import { Component } from '@angular/core';@Component({
selector: 'app-child',
template: `
<h1>{{title}}</h1>
`
})
export class AppChildComponent {
title = 'child app';
}

But this is not the default case in Angular. By default, styles are scoped only to their specific components and don't get applied to other components.

To apply the styling to other components and not just scoped to its respective component we generally tweak the default encapsulation property in Angular.

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

encapsulation: ViewEncapsulation.Emulated is the default property and it’s up to us to write it or not which makes the styling scoped to the component.

If we tweak it to ViewEncapsulation.None and then provide the styling say a p tag again with blue colour, it gets applied to both the AppComponent and AppChildComponent thus not staying scoped to a particular component.

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
title = 'parent component';
}

To summarize:

ViewEncapsulation.Emulated, in this option:

  1. The style will be scoped to the component.
  2. This is the default value for encapsulation and can be written or ignored.

ViewEncapsulation.None, in this option:

  1. Style is not scoped to the component.
  2. Can be changed, but have to mention it.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store