Angular: What is view encapsulation
May 16, 2022
Table of contents
Quick Access
One of the most used frameworks in recent years to build the frontend part of an application or website is Angular. This is how they define it on their official website “Angular is a development platform, built on TypeScript”.
As a platform, Angular includes:
- A component-based framework for building scalable web applications
- A collection of well-integrated libraries covering a wide variety of functions, including routing, form management, client-server communication, and more
- A set of development tools to help you develop, build, test, and update your code
Angular is popular with big companies
Angular gives a business the ability to have a scalable website with a new design. For a software company, using this framework has several benefits and uses, among which are: creating forums, business portals, crowdfunding platforms, marketplaces, property listings, etc.
Among the companies that have made use of this framework for their pages and applications are: GitHub (forum), Google, Forbes, Indiegogo, BMW (price calculator, offer search engine), Deutsche Bank developer portal, Crunchbase, Nike , Xbox, Udacity , YoutubeTV, Firebase, AT&T and Adobe.
What is view encapsulation in Angular?
Angular offers its users several components that make development an easy and fast task, among these, it stands out in view encapsulation or encapsulated view according to its translation into Spanish, which they explain on the framework page.
There they tell us “In Angular, the styles of a component can be encapsulated within the host element of the component so that they do not affect the rest of the application. The component decorator provides the encapsulation option that can be used to control how the per-component encapsulation is applied.
The developer can choose from the following modes:
- ShadowDom: Angular uses the browser's built-in Shadow DOM API to enclose the component's view inside a ShadowRoot (used as the component's host element) and apply the provided styles in isolation.
- Emulated: Angular modifies the component's CSS selectors so that they only apply to the component's view and do not affect other elements in the app (emulates Shadow DOM behavior).
- None: Angular does not enforce any type of view encapsulation, which means that any styles specified for the component are applied globally and can affect any HTML elements present within the application. This mode is essentially the same as including the styles in the HTML itself.
Example of each encapsulation mode in Angular
None
The following example shows an element that contains ViewEncapsulation.None
@Component({
selector: 'app-no-encapsulation',
template: `
<h2>None</h2>
<div class="none-message">No encapsulation</div>
`,
styles: ['h2, .none-message { color: red; }'],
encapsulation: ViewEncapsulation.None,
})
export class NoEncapsulationComponent { }
Emulated
The following example shows an element that contains the ViewEncapsulation.Emulated component.
@Component({
selector: 'app-emulated-encapsulation',
template: `
<h2>Emulated</h2>
<div class="emulated-message">Emulated encapsulation</div>
<app-no-encapsulation></app-no-encapsulation>
`,
styles: ['h2, .emulated-message { color: green; }'],
encapsulation: ViewEncapsulation.Emulated,
})
export class EmulatedEncapsulationComponent { }
Similar to ViewEncapsulation.None, Angular adds the styles for this component to the <head> of the document, but with "scoped" styles.
Therefore, only elements directly within this component's template will match its styles. Since the "scoped" styles of the EmulatedEncapsulationComponent are very specific, they override the global styles of the NoEncapsulationComponent.
ShadowDom
Now, let's look at an example component that contains ViewEncapsulation.ShadowDom
@Component({
selector: 'app-shadow-dom-encapsulation',
template: `
<h2>ShadowDom</h2>
<div class="shadow-message">Shadow DOM encapsulation</div>
<app-emulated-encapsulation></app-emulated-encapsulation>
<app-no-encapsulation></app-no-encapsulation>
`,
styles: ['h2, .shadow-message { color: blue; }'],
encapsulation: ViewEncapsulation.ShadowDom,
})
export class ShadowDomEncapsulationComponent { }
On the Angular page they explain "in this example, the ShadowDomEncapsulationComponent contains both the NoEncapsulationComponent and the EmulatedEncapsulationComponent".
Our Rootstack developers have used Angular to design dynamic applications focused on a good user experience when interacting with them, thus being able to solve the technical problems of our international clients.
We recommend you on video
Related Blogs
How to use data science to improve a company's results?
Machine Learning in Human Resources
Machine Learning Features
Data Science vs Data Analytics
