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.