Learning Angular 2 – Conditionally add styles to an element

Here we’re going through a couple of ways to conditionally apply some styles to a DOM element in Angular 2.

Directly manipulating styles property

A rather unconventional way would be to return the styling property as a string and then to directly set it on the desired element:

//our root app component
import {Component} from 'angular2/core'
@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <div [style.background-color]="getStyle()">
        I am a div that wants to be styled
      </div>
      <button (click)="showStyle = !showStyle;">Toggle style</button>
    </div>
  `,
  directives: []
})
export class App {
  showStyle: false;
  constructor() {
  }
  getStyle() {
    if(this.showStyle){
      return "yellow";
    } else {
      return "";
    }
  }
}

Note the [style.background-color] in the code above.

Adding a class

Similarly as we did with the background-color above, we can add a class, using the following notation: [class.nameOfClass]="someCondition".

//our root app component
import {Component} from 'angular2/core'
@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <div [class.my-class]="isClassVisible">
        I am a div that wants to be styled
      </div>
      <button (click)="isClassVisible = !isClassVisible;">Toggle style</button>
    </div>
  `,
  styles: [
  `
  .my-class {
    background-color: yellow;
  }
  `
  ]
  directives: []
})
export class App {
  isClassVisible: false;
  constructor() {
  }
}

The good old “ngClass”

Theres another way of adding a class. Especially Angular 1 developers may immediately recognize this. The good old NgClass.

It is made available under the angular2/common module which we need to import:

...
import {NgClass} from 'angular2/common';
...

..and obviously reference it in the directives property of our component.

@Component({
  selector: 'my-app',
  providers: [],
  ...
  directives: [NgClass]
})

Then we can use it just as we did in Angular 1. Here’s the full code example.

//our root app component
import {Component} from 'angular2/core';
import {NgClass} from 'angular2/common';
@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <div [ngClass]="{'my-class': isClassVisible }">
        I am a div that wants to be styled
      </div>
      <button (click)="isClassVisible = !isClassVisible;">Toggle style</button>
    </div>
  `,
  styles: [
  `
  .my-class {
    background-color: yellow;
  }
  `
  ]
  directives: [NgClass]
})
export class App {
  isClassVisible: false;
  constructor() {
  }
}

Referencing the DOM element directly via ElementRef

The last possibility is by directly interacting with the underlying DOM element. For that purpose we create a directive styled which we add to our div.

<div styled>
    I'm a div that wants to be styled
</div>

Our directive looks like this:

import {Directive, ElementRef, Renderer} from 'angular2/core';
@Directive({
  selector: '[styled]',
})
export class StyledDirective {
  constructor(public el: ElementRef, public renderer: Renderer) {
    // el.nativeElement.style.backgroundColor = 'yellow';
    renderer.setElementStyle(el, 'backgroundColor', 'yellow');
  }
}

The important part here is the ElementRef and the Renderer which I import in the constructor.

The ElementRef allows us to gain access to the nativeElement via

el.nativeElement.style.backgroundColor = 'yellow';

This way you can deliberately modify the properties of the native DOM element. So why would I want to use the Renderer. Well, Angular 2 isn’t only build for the browser, but it can potentially also be rendered on the server or render native elements on a mobile device (via NativeScript for instance). Thus, the Renderer provides an abstraction over the native elements.

Check out this Plunk for the full code.

Conclusion

So in this article you learned about three possibilities to style your DOM elements from within Angular 2. You got to see

• directly binding with [style.background-color]
• adding a class [class.my-class]
• using NgClass [ngClass]
• by directly accessing the native DOM element

You even quickly saw how to create a Directive and how to embed styles within a Component .