NashTech Insights

Styling Child Components from Parent in Angular

Table of Contents
Styling Child Components from Parent in Angular


Angular is a powerful front-end framework that allows developers to build dynamic and responsive web applications. One common requirement in web development is the ability to style child components from a parent component. This can be useful for maintaining a consistent design across different parts of your application. In this blog, we will explore different techniques for styling child components from a parent component in Angular.

Method 1: Using Input Properties

One of the most straightforward ways to style child components from a parent component is by passing styles as input properties to the child component. This approach allows you to dynamically apply styles to the child component based on the parent’s state.

1. Create Input Properties in Child Component

In your child component, define input properties to receive the styles from the parent component. For example:

@Input() backgroundColor: string;
@Input() textColor: string;

2. Pass Styles from Parent to Child

In the parent component’s template, bind the styles to the child component’s input properties:

<app-child [backgroundColor]="'#F0F0F0'" [textColor]="'#333'"></app-child>

3. Apply Styles in Child Component

Inside the child component’s template, use the input properties to apply the styles:

<div [style.background-color]="backgroundColor" [style.color]="textColor">
  <!-- Child component content -->

Method 2: Using ngStyle Directive

Angular provides a built-in directive called ngStyle, which allows you to dynamically apply styles to an element based on an expression.

1. Create a Style Object in Parent Component

In the parent component, create a JavaScript object that represents the styles you want to apply to the child component:

styles = {
  backgroundColor: '#F0F0F0',
  color: '#333'

2. Bind the Style Object to the Child Component

In the parent component’s template, use the ngStyle directive to bind the style object to the child component:

<app-child [ngStyle]="styles"></app-child>

3. Apply Styles in Child Component

Inside the child component’s template, the styles will be automatically applied to the element:

<div [ngStyle]="styles">
  <!-- Child component content -->

Method 3: Using ViewEncapsulation

Angular provides a feature called ViewEncapsulation, which allows you to control the scoping of CSS styles in your components. By default, Angular encapsulates the styles of each component to prevent global CSS conflicts. However, you can use ViewEncapsulation to disable this encapsulation and style child components from the parent.

1. Disable ViewEncapsulation in Child Component

In the child component, disable ViewEncapsulation by setting its encapsulation mode to None in the component decorator:

  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  encapsulation: ViewEncapsulation.None // Disable encapsulation

2. Style Child Component from Parent

In the parent component’s CSS file, you can directly target the child component’s elements using their selectors. For example:

/* parent.component.css */
app-child {
  background-color: #F0F0F0;
  color: #333;


Styling child components from a parent component in Angular can be accomplished using various techniques, depending on your project’s requirements. You can pass styles as input properties, use the ngStyle directive, or disable ViewEncapsulation to directly style child components. Each approach has its advantages and trade-offs, so choose the one that best suits your specific use case and coding style.

Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency



Aanchal Agarwal is a Software Consultant at NashTech. Her practice area is web development. She is recognized as a multi-talented, multitasker, and adaptive to the different work environments. Her hobbies include watching movies, listening to music, and traveling. She likes to read books and explore new things.

Leave a Comment

Your email address will not be published. Required fields are marked *

Suggested Article

%d bloggers like this: