How to Use ngStyle in Angular: Simple Styling Guide

Use Angular's ngStyle directive to apply inline CSS styles dynamically by binding an object of style properties and values to an element. This allows you to change styles based on component data or expressions directly in your template.

Syntax

The ngStyle directive expects an object where keys are CSS property names and values are the CSS values to apply. You bind it using Angular's property binding syntax with square brackets.

• [ngStyle]="{ 'property': 'value' }" applies styles inline.
• Property names can be in camelCase or kebab-case (as strings).
• Values can be strings or expressions from your component.

html

<div [ngStyle]="{ 'color': 'blue', 'font-weight': 'bold' }">Styled Text</div>

Output

The text 'Styled Text' appears in bold blue color on the page.

Example

This example shows how to use ngStyle to change text color and font size dynamically based on component properties.

typescript

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

@Component({
  selector: 'app-style-example',
  template: `
    <p [ngStyle]="{ 'color': textColor, 'font-size.px': fontSize }">
      This text changes style dynamically.
    </p>
    <button (click)="changeStyle()">Change Style</button>
  `
})
export class StyleExampleComponent {
  textColor = 'green';
  fontSize = 16;

  changeStyle() {
    this.textColor = this.textColor === 'green' ? 'red' : 'green';
    this.fontSize = this.fontSize === 16 ? 24 : 16;
  }
}

Output

Initially, the paragraph text is green and 16px. Clicking the button toggles the text color between green and red and font size between 16px and 24px.

Common Pitfalls

• Not using square brackets [] for binding causes ngStyle to treat the value as a string literal, not an object.
• Using invalid CSS property names or missing quotes for kebab-case properties can cause styles to not apply.
• For numeric values like font-size, include units (e.g., px) or use Angular's special syntax like 'font-size.px'.

html

/* Wrong usage: no binding brackets, styles won't apply dynamically */
<div ngStyle="{ 'color': 'blue' }">Wrong Style</div>

/* Correct usage: with binding brackets */
<div [ngStyle]="{ color: 'blue' }">Correct Style</div>

Output

The first div does not get styled dynamically; the second div appears blue.

Quick Reference

Usage	Description
[ngStyle]="{ 'color': 'red' }"	Apply red color inline style
[ngStyle]="{ 'font-size.px': 20 }"	Set font size to 20 pixels
[ngStyle]="styleObject"	Bind a component object with multiple styles
[ngStyle]="{ 'background-color': isActive ? 'yellow' : 'white' }"	Conditional style based on component data

Key Takeaways

Use square brackets to bind an object to ngStyle for dynamic inline styles.

CSS property names can be camelCase or kebab-case strings inside the object.

Include units like 'px' explicitly or use Angular's dot notation for numeric styles.

Avoid missing binding brackets or invalid property names to ensure styles apply correctly.

ngStyle is great for changing styles based on component data or user actions.