CODEWITHSUNDEEP
angular
AndreFeijo
AndreFeijo

Reputation: 10629

How to style nested components in Angular 6?

Imagine I have a wrapper component:

<app-my-wrapper>
   <router-outlet></router-outlet>
</app-my-wrapper>

The router outlet injects one of following components:

<app-page1></app-page1>
<app-page2></app-page2>
<app-page3></app-page3>

I want app-page1, app-page2 and app-page3 to have some special styles, but only if inside app-my-wrapper.

I'd normally do something like this:

my-wrapper.component.scss

:host ::ng-deep .page {
   /* some styles */
}

According to angular.io, /deep/, >>>, and ::ng-deep are deprecated.

What would be the proper way of giving the children components some extra styles depending on the parent component?

Upvotes: 1

Views: 1025

Answers (1)

Supamiu
Supamiu

Reputation: 8731

You can disable view encapsulation for your current component:

Simply add encapsulation: ViewEncapsulation.None in your component decorator.

See https://angular.io/api/core/ViewEncapsulation for more details.

Upvotes: 2

Related Questions