CODEWITHSUNDEEP
cssangular
Mehran
Mehran

Reputation: 16821

How to use parent component's class in a child css selector

Consider the following hierarchy in some Angular 2/4 project:

<parent-cmp [ngClass]="{ 'parent': condition }">
    <child-cmp class="child"></child-cmp>
</parent-cmp>

Now in the child component's CSS file I would like to say:

.parent .child {
    background-color: red;
}

In this scenario, I'm basing the child's design on parent's logic without knowing what that logic is at child level. But the problem is that, this is not going to work. And that's because, Angular compiles the the child CSS selectors to this:

.parent[_ngcontent-c9] .child[_ngcontent-c9] {
    background-color: red;
}

And the parent part of the selector is not going to work anymore. So How can I pull this off? Also please bear in mind that I simplfied this example and the two components are not necessarily one after another (there might be arbitrary number of components in between).

Upvotes: 5

Views: 2658

Answers (1)

Reactgular
Reactgular

Reputation: 54741

In Angular this is called "view encapsulation" where the JavaScript, CSS styles, and HTML templates are all managed by Angular. There are a lot of advantages to this approach as it allows you to easily tree-shake a project and drop components that are not being used. You not only drop the Javascript code, but all the styles and HTML with it.

When it's turned on the styles are injected into the DOM as embedded styles. Angular keeps track of what styles are required on the document and adds or removes styles as needed. These styles can have strange names at run-time like those in your question.

You need to read up on the https://angular.io/guide/component-styles styles guide to see how to define a :host style. This is the style assigned to a component when view encapsulation is turned on. When using :host you can refer to the parent selector using a :host-context path, and you can also style inside other child components using the ::ng-deep selectors.

Keep in mind. This is all optional. It's turned on by default, but if you don't want to use it. You can turn it off.

You can change the view encapsulation mode when you define your component. To disable this feature just change the encapsulation option to native.

See the guide:

https://angular.io/guide/component-styles#view-encapsulation

Upvotes: 7

Related Questions