[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
}