[SOLVED] Right way to override child component style from host component angular

Right way to override child component style from host component angular

What is the right way to override child component style from host component. I tried using encapsulation: ViewEncapsulation.None but i need to write the override stuff in style.sass file rather than host component. What should be the stackblitz

Solution

If you have control on the child component code, you can define a customStyle input property:

@Input() customStyle: {};

<div class="child-div" [ngStyle]="customStyle">I am the child</div>

and pass it from the parent component:

<app-child [customStyle]="style1"></app-child>

style1 = {
  backgroundColor: "red",
  height: "150px"
}

See this stackblitz for a demo.

A similar technique can allow to pass a specific style attribute to the child component:

@Input() backgroundColor: string;

<div class="child-div" [style.background-color]="backgroundColor">I am the child</div>

from the parent component:

<app-child backgroundColor="red"></app-child>

See this stackblitz for a demo.

Otherwise, until an alternative method is proposed by Angular, you can use the ::ng-deep shadow-piercing descendant combinator to modify the child component styling from the parent CSS:

:host ::ng-deep .parent .child-div {
  background-color: lime;
  height: 200px;
}

See this stackblitz for a demo.