Angular - View Encapsulation

View encapsulation is a technique to encapsulate the style of the given view from other sections of the application. By default, the CSS style applied in an HTML document will affect the entire document. The same applies to the Angular framework as well. This default behaviour is going to be an advantage in some scenarios like global styles but at the same time, it may affect specific parts of the application unintentionally (like a special button/link with specific styles).

To make sure that the style of the specific part of the application does not get affected, the view encapsulation concept provided by Angular can be used.

View Encapsulation Modes in Angular

Angular provides a property named view encapsulation in the Component decoration to direct the scope of component style. There are three modes of encapsulation, which are as follows −

• None (ViewEncapsulation.None)
• Emulated (ViewEncapsulation.Emulated)
• ShadowDom (ViewEncapsulation.ShadowDom)

ViewEncapsulation.None

The mode None will not do anything to safeguard the style of an element inside the component. Component view will be exposed to all the global styles and get affected by it.

Example

Let us create a simple component to check how ViewEncapsulation.None mode works.

Step 1: Create a new Angular application with the name sample-app using the below command −

 ng new sample-app 

Step 2: Navigate to the project folder using cd command. Create a new component and name it view-encapsulation-sample.

 $ ng generate component view-encapsulation-sample CREATE src/app/view-encapsulation-sample/view-encapsulation-sample.component.html (41 bytes) CREATE src/app/view-encapsulation-sample/view-encapsulation-sample.component.spec.ts (736 bytes) CREATE src/app/view-encapsulation-sample/view-encapsulation-sample.component.ts (320 bytes) CREATE src/app/view-encapsulation-sample/view-encapsulation-sample.component.css (0 bytes) 

Step 3: Now, go to view-encapsulation-sample.component.ts file. Add ViewEncapsulation.None mode for the component as shown below −

 import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'app-view-encapsulation-sample', standalone: true, imports: [ViewEncapsulationSampleComponent], templateUrl: './view-encapsulation-sample.component.html', styleUrl: './view-encapsulation-sample.component.css', encapsulation: ViewEncapsulation.None }) export class ViewEncapsulationSampleComponent { } 

Step 4: Change the template, view-encapsulation-sample.component.html and add two containers as shown below −

 <div>I am inside the none container</div> <div class="mystyle">I am inside the none container and has my own style</div> 

Here, the first container does not have any styles or class and it is more prone to get affected by the global styles. The second container has class attributes and yet has a chance to get affected by global styles.

Step 5: Apply the style in the component css file, view-encapsulation-sample.component.css as shown below −

 div.mystyle { color: brown } 

Step 6: Add the component in the app component, app.component.html as shown below −

 <app-view-encapsulation-sample /> <router-outlet></router-outlet> 

Step 7: On running the application, you can clearly see that the generated style and element are plain and no safeguard is applied and the application will look as shown below −

Step 8: Add a style in the global css assets, styles.css targeting div tag and re-run the application.

 div { color: blue } 

Now, the color of the first container changed to blue as shown below −

ViewEncapsulation.Emulated

Emulated mode will change the styles in such a way that it only applies to the element inside the component only. However, global styles may still affect elements inside a component.

Example

Let us change our application and apply the Emulated option as shown below −

 import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'app-view-encapsulation-sample', standalone: true, imports: [ViewEncapsulationSampleComponent], templateUrl: './view-encapsulation-sample.component.html', styleUrl: './view-encapsulation-sample.component.css', encapsulation: ViewEncapsulation.Emulated }) export class ViewEncapsulationSampleComponent { } 

Now, re-run the application and check the result −

ViewEncapsulation.ShadowDom

ShadowDom mode will apply the HTML native shadow dom concept to scope the style of the component. The element of the component will not be affected by the global styles in any situation as it completely hide using shadowDOM concept.

Example

Change our application and apply the ShadowDOM mode as shown below −

 import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'app-view-encapsulation-sample', standalone: true, imports: [ViewEncapsulationSampleComponent], templateUrl: './view-encapsulation-sample.component.html', styleUrl: './view-encapsulation-sample.component.css', encapsulation: ViewEncapsulation.ShadowDom }) export class ViewEncapsulationSampleComponent { } 

Now, re-run the application and check the output.

Now, both containers are safeguarded by native shadowDOM concept and are not affected by the global styles.

Applying different encapsulation in an application

View encapsulation of a component can be different from other components used in the application as view encapsulation is applied per component basis. Even the nested component can have different view encapsulation options as per component requirements. Angular will apply the encapsulation as directed even in very complex nested component trees as well.

Multiple Choice Questions on Angular View Encapsulation

In this section, you can check your knowledge of the angular view encapsulation by giving correct answers to the questions given below −