Categories: Angular

Style encapsulation in Angular

Angular encapsulates the styles to make sure that it doesn’t contaminate any of your other elements. Actually, you’ll be able to really inform Angular whether it wants to do that or not, or if the styles will be accessible globally. You’ll be able to set this through the use of the encapsulation attribute on the element decorator.

The encapsulation attribute takes one of three values:

  • ViewEncapsulation.Emulated: This the default, where Angular created shimmed CSS to emulate the behavior that shadow DOMs and shadow roots provide.
  • ViewEncapsulation.Native: This is the ideal, where Angular will use shadow roots. This will only work on browsers and platforms that natively support it.
  • ViewEncapsulation.None: Uses global CSS, without any encapsulation.


The best way to see how encapsulation impacts . let’s apply it to the application  we created before. let’smake a slight change and see how our application behaves under different circumstances.

First, let us add the following snippet of code to the app.component.css file.

.name { font-size: 50px; }

If we run the application right now, there is no impact on our application. Now, let us try changing the encapsulation property on the main AppComponent. We will change the component as follows:


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

import { HttpClient } from '@angular/common/http';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { map, switchMap, debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
import API_KEY from './api_key';

const API_URL = '';

 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
 encapsulation: ViewEncapsulation.None

export class AppComponent implements OnInit {
 title = 'Angular RxJs YouTube Searcher';
 searchForm: FormGroup;
 results: Observable<any>;

constructor(private formBuilder: FormBuilder, private http: HttpClient) {
 this.searchForm ={
 search: ['', Validators.required]

ngOnInit() {;

search() {
 this.results =
 filter(value => value.length > 3),
 switchMap(searchTerm => this.http.get<any>(`${API_URL}?q=${searchTerm}&key=${API_KEY}&part=snippet`)),
 map(response => response.items)

We added the encapsulation: ViewEncapsulation.None line to our Element decorator (after all, after importing the ViewEncapsulation enum from angular). Now if we refresh our application, you will notice that the name of the stock has been blown as much as 50px. It is because the styles utilized on the AppComponentwill not be restricted to only the part however at the moment are taking the global namespace. Thus, any aspect that provides the identify class to itself will get this font-size utilized to it.

ViewEncapsulation.NONE is an efficient method of making use of widespread styles to all child elements, however does undoubtedly add the risk of polluting the global CSS namespace and having unintentional results.


 Create  Awesome Apps using Angular IDE

Most of examples in this article were created using Angular IDE. The Angular IDE by Webclipse is built specifically for Angular 2+. It is  simple for beginners; powerful for experts.

Lightning fast experience within Angular IDE

This IDE supports advanced editing of TypeScript 2.0  which improves your development effectively. Some cool features of Angular IDE are Listed Below.

  • Real-time validation and display of errors as you type code.
  • Auto-completion of code across your project.
  • Syntax-aware source colouring and occurrence highlighting.
  • Block and full-file formatting with advanced settings.
  • Integrated support for TypeScript debugging
  • Built first for tsconfig.json management.




Deven Rathore

Deven is an Entrepreneur, and Full-stack developer, Constantly learning and experiencing new things. He currently runs and

Published by
Deven Rathore

Recent Posts

Flutter App Development: Essential Things You Should Know

Divided by mobile operating systems, companies have to develop their apps twice and roll them…

10 hours ago

7 Tips To Build Responsive & Dynamic Drupal Website For Your Business

For optimal user experience, consumers want responsive websites that are easy to use, multi-device friendly,…

2 days ago

OpenCart vs Magento: What You Should Choose in 2021

Users all over the world are faced with the problem of choosing a platform for…

1 week ago

Top 20 Android Open Source Projects

Reading codes and contributing to open source has been proven to be one of the…

3 weeks ago

Top 5 tools to proofread and edit essays with the help of software

Poor grammar and incorrect spelling can significantly lower the value of any literary work. Going…

9 hours ago

The Best 5 Career Advice for Web Design Students

Are you thinking of a career in web design but not sure where to start? The…

4 weeks ago