[Angular 2]ng-class and Encapsulated Component Style2

Many Components require different styles based on a set of conditions. Angular 2 helps you style your Components by allows you to define Styles inline, then choosing which styles to use based on the current values in your Controller.

import {Component, Input} from 'angular2/core';
@Component({
selector: 'todo-item-renderer',
template: `
<style>
.completed{
text-decoration: line-through;
}
</style>
<div>
<span [ngClass]="todo.status"
[contentEditable]="todo.isEdit">{{todo.title}}</span>
<button (click)="todo.toggle()">Toggle</button>
<button (click)="todo.edit()">Edit</button>
</div>
`
})

export class TodoItemRenderer{
@Input() todo
}