add styles to child component from parent component angular

Question

I have a component inside the component I declared ng-content so afther that i want to add styles to these components which will be inside the ng-content example bellow

Parent component

<ng-content></ng-content>

now i use the parent component and give some content into the selectors

<app-parent-component>
  <div class="block"></div>
</app-parent-component>

so in the DOM I have this result
<app-parent-component>

<div class="block"></div>

<app-parent-component>

How can I add class to the block div from parent component?

Sergio · Accepted Answer · 2022-11-26T09:19:37.943

1

I found the solution look bellow

parent component html

<ng-content></ng-content>

parent component style scss

::ng-deep .block{
  background-color: red;
  width: 100px;
  height: 100px;
}

child component html

<app-parent-component>
  <div class="block"></div>
</app-parent-component>

edited Nov 26 '22 at 09:19

answered Nov 25 '22 at 08:18

Sergio

35
5

https://stackoverflow.com/questions/68443318/how-can-i-style-my-child-components-from-parent/68443521#68443521 – Eliseo Nov 25 '22 at 08:58
`:host` is unecessary – Lasithe Nov 25 '22 at 09:54

add styles to child component from parent component angular

1 Answers1