Skip to content

Latest commit

 

History

History
20 lines (16 loc) · 851 Bytes

view_encapsulation.md

File metadata and controls

20 lines (16 loc) · 851 Bytes

View Encapsulation

View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa. Angular provides three encapsulation strategies:

  • Emulated (default) - styles from main HTML propagate to the component. Styles defined in this component's @Component decorator are scoped to this component only.
  • Native - styles from main HTML do not propagate to the child. Styles defined in this component's @Component decorator are scoped to this component only.
  • None - styles from the component propagate back to the main HTML and therefore are visible to all components on the page.
@Component({
 ...
 encapsulation: ViewEncapsulation.None,
 styles: [ ... ]
})
export class Hello { ... }

View Example