Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan

Introduction to Angular ngClass and ngStyle

Cory Rylan

- 2 minutes


This article has been updated to the latest version Angular 17 and tested with Angular 16. The content is likely still applicable for all Angular 2 + versions.

Creating dynamic styles in web applications can be a real pain. Luckily with Angular we have multiple ways to handle our dynamic CSS and CSS classes with the new template syntax as well as some built in directives.

Angular Template Property Syntax

First lets look at how we would change a <div> color property in pure JavaScript.

let myDiv = document.getElementById('my-div'); = 'orange'; // updating the div via its properties

Now lets look at the primitives the Angular syntax gives us out of the box.Using the [property] syntax we can easily access any element or component properties.

<div [style.color]="'orange'">
style using property syntax, this text is orange

In the example above we can directly access the style property of our div element. This is different than an attribute. Properties are the properties defined on our DOM object just like the one we updated in our first example with just plain JavaScript.

We can also use the Angular property syntax to add CSS classes to elements.

<div [className]="'blue'">
CSS class using property syntax, this text is blue

ngStyle and ngClass

Out of the box with the new syntax we don't need special ng-class or ng-style directives like in Angular 1. But with Angular we still have these built in directives. These directives offer syntactic sugar for more complex ways of altering our element styles. First lets look at ngStyle.

<div [ngStyle]="{'color': 'blue', 'font-size': '24px', 'font-weight': 'bold'}">
style using ngStyle

In this example using ngStyle we can easily style multiple properties of our element. We also can bind these properties to values that can be updated by the user or our components.

<div [ngStyle]="{'color': color, 'font-size': size, 'font-weight': 'bold'}">
style using ngStyle

<input [(ngModel)]="color" />
<button (click)="size = size + 1">+</button>
<button (click)="size = size - 1">-</button>

Next lets look at the ngClass directive and the options it provides to update classes on our components and HTML elements.

<div [ngClass]="['bold-text', 'green']">array of classes</div>
<div [ngClass]="'italic-text blue'">string of classes</div>
<div [ngClass]="{'small-text': true, 'red': true}">object of classes</div>

Same as ngStyle the ngClass allows multiple ways to add and toggle our CSS. We can bind these classes directly to our component properties to update them dynamically as needed. Between the new template syntax and a few more directives our Angular apps are easier than ever to style. Checkout the work demo below!

View Demo Code   
Twitter Facebook LinkedIn Email

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts


Creating Dynamic Tables in Angular

Learn how to easily create HTML tables in Angular from dynamic data sources.

Read Article
Web Components

Reusable Component Patterns - Default Slots

Learn about how to use default slots in Web Components for a more flexible API design.

Read Article
Web Components

Reusable Component Anti-Patterns - Semantic Obfuscation

Learn about UI Component API design and one of the common anti-patterns, Semantic Obfuscation.

Read Article