Search code examples
cssangularparent-childng-deep

Styling child components template from parent component css angular

How to force CSS of child component from parent using ::ng-deep or something?

I have parent component where I put child component:

....parent.component...
<app-likes></app-likes>
.....parent.component......

Not inside that likes component there is he following HTML:

<div class="mainDiv">
<div class="secondDiv"><i class="far fa-heart fa-3x"></i></div></div>

Now I want to set color of fa-heart class to white from parent parent.component.css.

How can I do that?

Solution

  • You can do this way, in the css of the parent component:

    parent.component.css:

    :host ::ng-deep .fa-heart {
  color: red;
}

or

:host ::ng-deep app-likes .fa-heart {
  color: red;
}