Conditionally add styles to an element_element.styles-优快云博客

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 '@angular/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 '@angular/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 @angular/common module which is imported already for you, so there’s no need to do it manually. 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 '@angular/core';

@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;
  }
  `
  ]
})
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 '@angular/core';

@Directive({
  selector: '[styled]',
})
export class StyledDirective {
  constructor(public el: ElementRef, public renderer: Renderer) {
    // el.nativeElement.style.backgroundColor = 'yellow';
    renderer.setElementStyle(el.nativeElement, '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 API 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.