0Pricing
Angular Academy · Lesson

View Encapsulation Modes

Compare Emulated, None, and ShadowDom.

What Is View Encapsulation?

View encapsulation controls how a component styles are isolated from the rest of the page. Angular offers three modes via the encapsulation property.

Setting the Mode

Set the mode with the ViewEncapsulation enum in the @Component decorator.

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

@Component({
  selector: "app-card",
  encapsulation: ViewEncapsulation.Emulated
})
export class CardComponent {}

All lessons in this course

  1. Component-Scoped Styles
  2. View Encapsulation Modes
  3. Host and Host-Context Styling
  4. Dynamic Classes and Styles
← Back to Angular Academy