Adam Biro

Software Developer

Blogger

Photographer

Full Stack Developer

Photo Enthusiast

Web Developer

Adam Biro
Adam Biro

Software Developer

Blogger

Photographer

Full Stack Developer

Photo Enthusiast

Web Developer

Blog Post

How do view encapsulation and view files work in Angular 10?

June 14, 2022 Angular, IT, Programming
How do view encapsulation and view files work in Angular 10?

In the last episode of this series, I wrote about Angular Components options. In the current post, I want to deep dive into the topic of Angular view files and view encapsulation.

As we saw in the Angular Components post, a component must contain an @Component decorator section.

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

The decorator section can contain the templateUrl and styleUrls properties. These properties are optional because there are alternatives to this. However, before we go into the details of that. It is worth mentioning that the Angular view files are tied to components. ( The component file is our MVVM file. ) So when we talk about a component from a template point of view it can be with or without a template. And they can be with separated CSS, SASS, or LESS files or without it. Because of the with or without view files, you can also use the template or the styles properties. You can see that in a bit more depth below.

The templateURL vs. the template as view files

The templateUrl approach is good for big HTML files but if you wanted to write a few lines of HTML code, which doesn’t make your code that messy, then you can do that, using the template property.

import { Component } from '@angular/core';
  
@Component({  
  selector: 'app-root',  
  template:'<h1>Hello, {{name}}</h1>',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'DemoApplication';  
  name='Mr';  
} 

The styleUrls vs. the styles.

The logic between the styleURLs and the styles properties is the same as the logic between the different template properties as you have seen above. So, you should go with the styleUrls property for big CSS, SASS, or LESS files, and for small styling things, the styles property would be the way to go.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    h3{
      color:dodgerblue;
    }
  `]
   * * Option 2 is to place it into a separated file:
   * * styleUrls: ['./app.component.css']
  
})
export class AppComponent {
  title = 'my-first-app';
}

Let’s see the view encapsulation

What is encapsulation?

According to the Wikipedia object-oriented computer programming (OOP) languages, the notion of encapsulation (or OOP Encapsulation) refers to the bundling of data, along with the methods that operate on that data, into a single unit. Many programming languages use encapsulation frequently in the form of classes

Although view encapsulation is about making units too, the context of the unit is different compared to the OOP encapsulation term. In Angular, the view encapsulation refers to the style definition behavior. In other words, the View Encapsulation in Angular is a strategy that determines how Angular hides (encapsulates) the styles defined in the components from other parts of the application. Based on this we have three options and we can pass these options to an ‘encapsulation’ property.

  • ViewEncapsulation.None
    • The defined styles will be global and will be applied to other HTML elements, not just the elements of the current component.
  • ViewEncapsulation.Emulated
    • This strategy isolates the component styles. They do not bleed out to other components.
    • The global styles may affect the element styles in the component
    • The Angular adds the attributes to the styles and markups.
    • eg: <p ng-content-c2></p>
  • ViewEncapsulation.ShadowDOM
    • The Shadow DOM is a scoped sub-tree of the DOM.
    • It is attached to an element (called shadow host) of the DOM tree.
    • The shadow dom does not appear as a child node of the shadow host when you traverse the main DOM.
    • The browser keeps the shadow DOM separate from the main DOM.
    • The rendering of the Shadow dom and the main DOM happens separately.
    • The browser flattens them together before displaying them to the user.
    • The feature, state & style of the Shadow DOM stays private and are not affected by the main DOM. Hence it achieves true encapsulation.
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    h3{
      color:dodgerblue;
    }
  `],
   encapsulation:
      ViewEncapsulation.None|
      ViewEncapsulation.Emulated|
      ViewEncapsulation.ShadowDOM
  
})
export class AppComponent {
  title = 'my-first-app';
}

Conclusion

In the previous post, I wrote about the modules in Angular. In this post, I tried to highlight the basic properties and features of a component that we need to define if we want to create a component.

Episodes

Taggs:
Write a comment