Right way to override child component style from host component angular

Question

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 overri

Answer 1

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

@Input() customStyle: {};

I am the child

and pass it from the parent component:

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;

I am the child

from the parent component:

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.