ngClass with Angular 2 and TypeScript

ngClass adds and removes CSS classes on an element. An [ngClass] directive (in square brackets) uses the results of a template expression (in quotes) to set the names of the classes.

Updated Jan 2017, Angular version 2.4.x

Example

In the first example below, a space-separated list of CSS class names in the myClasses variable is added to the existing classes on the element when the buttons are clicked. An array of class names is also valid.

The second example uses a key:value control object to set the classes. If the big variable (the value) is true then the 'big' class (the key) is added to the element. If the back variable is true then the 'bright' class is added to the element, and so on. This allows multiple classes to be added and removed using a single ngClass directive.

We can also use a class binding to set a specific class name if the template expression in quotes is truthy.

ng-class.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'ng-class-directive',
    template: `
        <h2>ngClass</h2>
        
        <button (click)="myClasses='bright border'">Bright</button>
        <button (click)="myClasses='dull'">Dull</button>
        <button (click)="myClasses=''">Default</button>
        
        <p #part1 class="box big" [ngClass]="myClasses">
            Classes: {{part1.className}} 
        </p>
        
        <button (click)="big=!big">Big {{big ? 'off' : 'on'}}</button>
        <button (click)="back=!back">Background {{back ? 'off' : 'on'}}</button>
        <button (click)="bord=!bord">Border {{bord ? 'off' : 'on'}}</button>
        
        <p #part2 class="box" [ngClass]="{'big' : big, 'bright' : back, 'border' : bord}">
            Classes: {{part2.className}} 
        </p>
        
        <h3>Class binding</h3>
        <button (click)="brighter=!brighter">Bright {{brighter ? 'off' : 'on'}}</button>
        
        <p #part3 [class.box]="brighter" [class.bright]="brighter" [class.border]="brighter">
            Classes: {{part3.className}} 
        </p>`,
    styles: [`
        .box { max-width: 400px; padding: 5px; }
        .big { font-size: 26px; }
        .dull { background-color: LightGray; }
        .bright { color: Blue; background-color: Pink; }
        .border { border: 1px solid Red; }`
    ]
})
export class NgClassComponent {
    private myClasses = '';
}

The Application

Here is the output from this component.

Where Next?

To find out more about Angular and TypeScript, check out these tutorials.

  • Hello World - Implement a super-simple <hello-world> custom element using an Angular and TypeScript.
  • The Angular with TypeScript Tutorial - includes examples of components, template syntax, property binding, event binding, bootstrapping and more.
  • Configuration - Configure Angular and TypeScript to download dependencies from node modules or a CDN, and to compile the TypeScript during development or in the browser at runtime.
  • Templates - introduction to inline and external templates.
  • Interpolation - use curly braces and template expressions to output data on the page.
  • Property Binding - bind to DOM properties using square brackets and template expressions.
  • Event Binding - handle DOM events using parentheses and template statements.
  • Two-way Binding - combine property and event binding to create two-way binding with ngModel.
  • Input Binding - bind to <input> fields such as text, textarea, checkbox, radio and select.
  • Built-in Directives - see how to use built-in directives ngIf, ngSwitch, ngFor, ngClass and ngStyle.
  • Component Input Output - use @Input and @Output to pass data in to and out of a component.
  • Angular Router - Use the Angular router to navigate between components when the user clicks a link.
  • Nested Child Routes - An example of how child routes allow navigation between multiple views when a user clicks a link in a sub-menu.