ngStyle with Angular 2 and TypeScript

The ngStyle directive allows you to set CSS style on an HTML element conditionally.

Updated Jan 2017, Angular version 2.4.x

Example

We can set inline styles dynamically with the ngStyle directive.

We bind the [ngStyle] directive in square brackets to a key:value control object in quotes. The style name in the key of the object is set to the corresponding value.

We can also use style binding to set a single style value. The template expression in quotes is evaluated and bound to the style in square brackets.

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

@Component({
    selector: 'ng-style-directive',
    template: `
        <h2>ngStyle</h2>
        
        <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 #part1 class="box" [ngStyle]="myStyles">
            {{part1.style.cssText}} 
        </p>
        
        <h3>Style binding</h3>
        <button (click)="brighter=!brighter">Bright {{brighter ? 'off' : 'on'}}</button>
        
        <p #part2 class="box" [style.font-size.px]="brighter ? 26 : 14"
                              [style.background-color]="brighter ? 'Pink' : 'White'">
            {{part2.style.cssText}} 
        </p>`,
    styles: ['.box {max-width: 450px; padding: 5px; }']
})
export class NgStyleComponent {
    private big = false;
    private back = false;
    private bord = false;

    private get myStyles(): any {
        return {
            'font-size' : this.big ? '26px' : '14px',
            'color' : this.back ? 'Blue' : 'Black',
            'background-color' : this.back ? 'Pink' : 'White',
            'border' : this.bord ? '1px solid Red' : ''
        };
    }
}

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.