Web Development Blogs

View Encapsulation is a way that defines whether components styles will affect the whole application or not i.e it has control over usage of component styles, use styles globally or should be limited to a particular Angular component (scoped styles).

Angular Components can be styled via inline styles through styles property or via external styles through styleUrls which are the property of @Component decorator.

Example

In default root component “app.component.ts” adding style

• Inline styles through styles property.

1. @Component({
2.   selector: 'app-root',
3.   templateUrl: './app.component.html',
4.   styles: [
5.     `h1 {
6.       color: #369;
7.       font-family: Arial, Helvetica, sans-serif;
8.       font-size: 250%;
9.     }
10.   `]
11. })
12. export class AppComponent {
13.   title = 'Angular 4 app';
14. }

• External styles through styleUrls property.

1. import { Component } from '@angular/core';
2. @Component({
3.   selector: 'app-root',
4.   templateUrl: './app.component.html',
5.   styleUrls: ['./app.component.css']
6. })
7. export class AppComponent {
8.   title = 'Angular 4 app';
9. }

Above mentioned component styles are appended to document head. But by using native Shadow DOM the component styles will be included in component’s template.

Read more: ViewEncapsulation in Angular 4 – Types & Examples in JavaScript Application