Angular 2 Components

Encapsulation modes

By default, as we have seen, our component won't encapsulate its structure and styling. This means that CSS classes from outside of the component can override and affect the embedded CSS styles that we defined, and the HTML structure of the component is accessible as well.

Angular will generate a unique property for our selector to protect our styling, but this can be overridden with a CSS !important statement.

To change this, we need to define an encapsulation mode. Angular 2 provides us three options to choose from:

• Emulated (the default): Angular will add a special attribute to the class selector to avoid affecting other styles outside of the components.
• Native: This is the native encapsulation mechanism of the renderer that ...