Learning Angular 2: Conditionally add styles to an

element
www.webcodegeeks.com /javascript/angular-js/learning-angular-2-conditionally-add-styleselement/
+Juri Strumpflohner
Here were 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. Heres 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 isnt 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 .
Reference: Learning Angular 2: Conditionally add styles to an element from our WCG partner Juri
Strumpflohner at the Juri Strumpflohners TechBlog blog.