Home » JavaScript » Angular.js » Learning Angular 2: Conditionally add styles to an element

About Juri Strumpflohner

Juri Strumpflohner
Juri Strumpflohner mainly operates in the web sector developing rich applications with HTML5 and JavaScript. Beside having a Java background and developing Android applications he currently works as a software architect in the e-government sector. When he’s not coding or blogging about his newest discoveries, he is practicing Yoseikan Budo where he owns a 2nd DAN.

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 .

(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of