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 }