View encapsulation

Components can be configured to apply styles differently. This concept is called encapsulation, and that's what we are going to discuss now.

Create another project with the CLI and add an extra component with the following command:

ng g component child

Then, add this new component to the view via the app component:

// Code 5.2<!-- ./src/app/app.component.html --><div style="text-align:center">  <h1>  This is parent component  </h1>  <app-child></app-child> </div>  

The child component's template is as simple as this:

// Code 5.2<!-- ./src/app/child/child.component.html --><h3>This is child component </h3> 

That's just the minimum setup we need in order to understand view encapsulation strategies. Let's explore them.

Get TypeScript 2.x for Angular Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.