hardFrontend

What is ViewEncapsulation in Angular?

Q: What is ViewEncapsulation in Angular?

**Core concept.** ViewEncapsulation controls how a component's **styles are scoped**. The default, Emulated , scopes styles to the component by adding unique attributes to its elements (so they don't leak out or in). None makes the styles **global**, and ShadowDom uses the browser's native **Shadow DOM** for real isolation. Emulated default attr-scoped styles no leaking <text class='d-text' x='230' y='58' text-anchor='

485 views

Understand the problem

Explain style encapsulation modes.

view-encapsulation

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Setting the encapsulation mode

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

@Component({
  selector: 'app-badge',
  standalone: true,
  template: '<span class="badge">New</span>',
  styles: ['.badge { color: crimson; font-weight: 700; }'],
  // Emulated (default) → scoped; None → global; ShadowDom → native isolation
  encapsulation: ViewEncapsulation.Emulated,
})
export class BadgeComponent {}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the difference between switchMap, mergeMap, concatMap, and exhaustMap?

What is the difference between forkJoin, zip, combineLatest, and withLatestFrom?