How to Style Child Components from Parent Component in Angular

When working with Angular, applying styles from a parent component to its child components can be tricky due to Angular’s encapsulation mechanism. By default, Angular uses ViewEncapsulation.Emulated, which scopes styles to their respective components, preventing parent styles from affecting child components. In this guide, we will explore different ways to style child components from a parent component.

1. Using ViewEncapsulation.None (Global Styling)

If you want the styles of a parent component to apply to its child components, you can disable view encapsulation using ViewEncapsulation.None.

import { Component, ViewEncapsulation } from '@angular/core'

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class ParentComponent {}

This will make the styles in parent.component.css globally available, meaning they will also apply to child components. However, this approach can lead to unintended style leaks.

2. Using ::ng-deep (Deprecated)

Previously, developers used ::ng-deep to override child component styles from the parent’s stylesheets:

:host ::ng-deep .child-class {
  color: red;
}

However, ::ng-deep is deprecated and not recommended for future use.

3. Using :host-context()

A more Angular-friendly approach is using :host-context(). This allows you to apply styles based on an ancestor component’s presence.

:host-context(.parent-class) {
  background-color: lightblue;
}

This will apply the styles to the child component only if it is inside an element with the parent-class.

4. Passing Classes or Styles via Input Binding

Instead of modifying child styles directly, you can pass class names or styles from the parent as an @Input().

Parent Component:

<app-child [customClass]="'custom-style'"></app-child>

Child Component:

import { Component, Input } from '@angular/core'

@Component({
  selector: 'app-child',
  template: `<div [ngClass]="customClass">Child Component</div>`,
  styleUrls: ['./child.component.css'],
})
export class ChildComponent {
  @Input() customClass: string
}

CSS (child.component.css):

.custom-style {
  color: blue;
}

5. Using CSS Custom Properties (Variables)

Another modern approach is using CSS variables, which allows the parent component to define styles that the child component can use.

Parent Component (parent.component.css):

:root {
  --primary-color: blue;
}

Child Component (child.component.css):

div {
  color: var(--primary-color);
}

This approach keeps styling flexible and avoids breaking encapsulation.

FAQs

1. Is `::ng-deep` still recommended for styling child components?

No, ::ng-deep is deprecated. It is better to use other methods like :host-context() or CSS variables.

2. Why doesn’t my parent component’s styles apply to child components?

Angular uses ViewEncapsulation.Emulated by default, which scopes styles to their components. Use ViewEncapsulation.None to disable encapsulation or apply other techniques mentioned above.

3. Can I style a child component conditionally from the parent?

Yes, using :host-context() or passing a class via @Input() allows you to conditionally style child components.