Angular ngStyle Directive – Dynamic Inline Styling Guide

Introduction

Instead of manually changing CSS properties using JavaScript, Angular provides the ngStyle directive, which makes applying inline styles simple, declarative, and reactive.

The ngStyle directive is an attribute directive that allows you to dynamically set one or more inline CSS styles on an HTML element. Angular automatically updates these styles whenever the bound values change, eliminating the need for direct DOM manipulation.

Angular 20+ fully supports ngStyle.

What is Angular ngStyle?

The ngStyle directive is an Angular attribute directive that dynamically applies one or more inline CSS styles to an HTML element.

Unlike ngClass, which applies predefined CSS classes, ngStyle directly assigns CSS property values.

Example:

Component:

textColor = 'blue';

Template:

<p [ngStyle]="{'color': textColor}">
  Welcome to Angular
</p>

Angular sets the text color to blue.

If textColor changes to ‘red‘, Angular automatically updates the style.

Syntax of ngStyle

Basic syntax:

element [ngStyle]="styleObject">

The bound expression must evaluate to an object where:

• The key is the CSS property.
• The value is the CSS value.

Example:

<p [ngStyle]="{'color': 'red'}">
  Angular
</p>

Basic Example

Component:

fontColor = 'green';

Template:

<p [ngStyle]="{'color': fontColor}">
  Angular Tutorial
</p>

Output:

Applying Multiple Styles

Component:

fontSize = 20;
background = 'yellow';

Template:

<p [ngStyle]="{
'color': 'blue',
'font-size.px': fontSize,
'background-color': background
}">
  Angular ngStyle Example
</p>

Angular applies all three styles simultaneously.

Dynamic Text Color

Component:

isError = true;

Template:

<p [ngStyle]="{
'color': isError ? 'red' : 'green'
}">
  Status Message
</p>

The text color changes automatically based on the value of isError

Dynamic Font Size

Component:

fontSize = 24;

Template:

<p [ngStyle]="{
'font-size.px': fontSize
}">
  Angular
</p>

Angular appends the px unit automatically because of the .px suffix.

Dynamic Background Color

Component:

backgroundColor = 'lightblue';

Template:

<div [ngStyle]="{
'background-color': backgroundColor
}">
  Welcome
</div>

Changing backgroundColor updates the background instantly.

Dynamic Width and Height

Component:

boxWidth = 300;
boxHeight = 150;

Template:

<div [ngStyle]="{
'width.px': boxWidth,
'height.px': boxHeight,
'background-color': 'lightgray'
}">
</div>

This is useful for dashboards, charts, and responsive layouts.

Using ngStyle with User Preferences

Component:

theme = 'dark';

Template:

<div [ngStyle]="{
'background-color':
theme === 'dark'
? '#333'
: '#fff',
'color':
theme === 'dark'
? '#fff'
: '#000'
}">
  Theme Example
</div>

Users see different themes depending on the selected preference.

Using ngStyle with Form Validation

Component:

isValid = false;

Template:

<input [ngStyle]="{
'boer-color':
isValid
? 'green'
: 'red'
}"
>

Angular updates the border color according to the validation state.

Using ngStyle with *ngFor

Component:

products = [
  {
    name: 'Laptop',
    available: true
  },
  {
    name: 'Phone',
    available: false
  }
];

Template:

<div *ngFor="let product of products">
  <p [ngStyle]="{color': product.available ? 'green' : 'red' }">
    {{ product.name }}
  </p>
</div>

Each product receives its own styling based on availability.

Using ngStyle with Standalone Components

Angular 20 promotes standalone components.

Example:

import { Component } from '@angular/core';
import { NgStyle } from '@angular/common';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [NgStyle],
  template: `
 <p [ngStyle]="{
        color: textColor
      }">
      Angular 20
    </p>
  `
})
export class HomeComponent {
  textColor = 'blue';
}

Using CSS Units

Angular supports CSS units.

Example:

<div [ngStyle]="{
'font-size.em': 2,
'width.%': 80,
'height.vh': 50
}">

Supported units include:

• px
• %
• em
• rem
• vh
• vw

This makes responsive styling easier.

ngStyle vs ngClass

ngStyle

Applies inline CSS properties.

<p [ngStyle]="{
'color': 'red
}">

ngClass

Applies predefined CSS classes.

<p [ngClass]="{
error: true
}">

Comparison

Feature	ngStyle	ngClass
Applies	Inline styles	CSS classes
Reusability	Lower	Higher
Best For	Dynamic style values	Reusable styling
Performance	Good	Better for reusable styles
Recommended Use	Runtime style calculations	Most styling scenarios

Whenever possible, use CSS classes with ngClass. Use ngStyle when style values are generated dynamically.

ngStyle vs Style Binding

Angular also supports individual style binding.

Example:

<p
[style.color]="textColor">

This is ideal when changing a single style property.

For multiple style properties, ngStyle provides cleaner syntax.

Why Use ngStyle?

The ngStyle directive provides several benefits.

1. Dynamic Styling:

Apply CSS values that are determined at runtime.

2. Automatic Updates:

Angular updates styles whenever component data changes.

3. Flexible Styling:

Apply one or many CSS properties using a single directive.

Common Mistakes

1. Forgetting to Import NgStyle

Standalone components must import NgStyle from @angular/common.

2. Using ngStyle Instead of CSS Classes

If multiple elements use the same styling, CSS classes are more maintainable.

3. Writing Complex Expressions

Avoid:

[ngStyle]="calculateStyles()"

Store calculated styles in the component.

4. Overusing Inline Styles

Too many inline styles can make templates difficult to read.

Use external stylesheets whenever practical.

Advantages and Disadvantages

Advantages

• Dynamic inline styling
• Simple syntax
• Supports multiple CSS properties
• Automatic updates
• Integrates with Angular change detection
• Works with standalone components
• Supports responsive CSS units
• Eliminates manual DOM manipulation

Disadvantages

• Less reusable than CSS classes
• Large style objects reduce readability
• Calling methods repeatedly may affect performance
• Excessive inline styles make maintenance harder

Conclusion

The Angular ngStyle directive is a powerful attribute directive that enables developers to apply dynamic inline CSS styles based on application data. It simplifies runtime styling by automatically updating element appearance whenever bound values change, eliminating the need for manual DOM manipulation.

Angular 20+ fully supports ngStyle, making it an excellent choice for scenarios where style values—such as colors, sizes, dimensions, or themes—are determined dynamically.

Angular ngStyle Directive – Objective Questions (MCQs)

Related Angular Tutorials