How to Style Child Component From Parent In Angular

Explore approaches to set styles from parent to a child component

Photo by Sue Zeng on Unsplash

Angular provides a mechanism to encapsulate component CSS styles into the component’s view without affecting the rest of the application. This approach has many advantages but also cause a common problem that many developers encountered.

The Problem

Let’s say that we have a parent component which includes a child component.

<parent-component>
   <child-component></child-component>
</parent-component>

child component

<button class="child-button">Click me</button>

Since parent and child components are scoping their own styles because of the view encapsulation.

How can I set the styles of the child button from the parent component? This is a common requirement in a real development environment.

We can try doing this in the parent component

.parent .child button {
    color: red;
}

The above style in the parent component won’t be applied to the child component. When the component is using emulated view encapsulation (default), Angular preprocesses all the styles to approximate the standard…