View encapsulation

View encapsulation is something that is extremely convenient and very cool—as most things in Angular are—and is used to configure the scope of our CSS. 

Typically, when we create (or change) a CSS class, the style is applied throughout our application and is not confined to a specific page, component, and so on. Angular gives us a level of control over this by allowing us to encapsulate (that is, restrict, or contain) our styles to the components that contain the given style sheets/CSS. This is done through another property of the @Component annotation, named encapsulation.

We can set the encapsulation of our component's styles to one of the following three possible values:

  • ViewEncapsulation.Emulated: This is the default value and the effect is that our styles will remain contained to just our component. They will not affect anything else on our page(s). However, our component will still inherit, or have access to, styles that are globally accessible to our application.
  • ViewEncapsulation.Native: This is basically the same thing as ViewEncapsulation.Emulated, except that we are asking Angular to block, or shield, our component from any globally defined styles. The effect is that our component will be immune from any styles that are not assigned to our @Component annotation's styles or styleUrls properties. 
  • ViewEncapsulation.None: This is the setting that we would use if we didn't want to control the level of CSS isolation at all. In other words, if we wanted to let our component's CSS affect other page assets, and also wanted our component to inherit globally defined CSS rulesets, this is the setting that we would use.

Is this cool or what? What a feature! If you think about it, this is one of the things that make code reuse, even between applications, not just within the same application, possible. If we want to guarantee that our component will look the same across Angular applications, regardless of any given application's styles, we can set our component's encapsulation property to ViewEncapsulation.Native and we're good to go.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.224.149.242