[Angular 2] ng-class and encapsulated Component Styles

Ngclass} From "Angular2/angular2",@Component ({    ' Todo-item-render '}) @View ({    directives: [Ngclass ],    styles: ['        . started{            color:green;        }        . Completed {            text-decoration:line-through;        }    '],    Template: '       <div>           [ng-class]= ' Todoinput.status ' >{{ Todoinput.title}}</span>           <button (click) = "Todoinput.toggle ()" >Toggle</button>       </ div>    '}) Export class todoitemrender{    @Input () Todoinput:todomodel;}

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

You can define a static var on the Todomodel:

Export class todomodel{ static started:string = "Started"; Static completed:string = "Completed"; Status:string=todomodel.started; Constructor (public title:string= "") {} toggle ():void{        if( This. Status = = =todomodel.started) This. Status = todomodel.completed; Else  This. Status = todomodel.started; }}export class todoservice{todos:todomodel[]= [        NewTodomodel (' Eat '),        NewTodomodel (' Sleep '),        NewTodomodel (' Work ')    ]; Addtodo (Value:todomodel):void {         This. Todos.push (value); }}

Then on the Todoitemrender, you can require Todomodel and use the static VAR:

Import {Input, Component, View, Ngclass} from "Angular2/angular2"'./todoservice '; @Component ({     ' Todo-item-render '}) @View ({    directives: [Ngclass],    styles: ['        . ${todomodel.started}}{            color:green;        }        . ${todomodel.completed} {            text-decoration:line-through;        }    '],    Template: '       <div>           <span [ng-class]= ' Todoinput.status ' >{{todoinput.title}} </span>           <button (click) = "Todoinput.toggle ()" >Toggle</button>       </div>     `}) Export Class todoitemrender{    @Input () Todoinput:todomodel;}

[Angular 2] ng-class and encapsulated Component Styles