[Angular 2] ng-class and Encapsulated Component Styles

import {Input, Component, View, NgClass} from "angular2/angular2";

@Component({
selector: 'todo-item-render'
})
@View({
directives: [NgClass],
styles: [`
.started{
color: green;
}

.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;
}

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.

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[] = [
new TodoModel('eat'),
new TodoModel('sleep'),
new TodoModel('work')
];

addTodo(value: TodoModel):void {
this.todos.push(value);
}
}

Then in the todoItemRender, you can require TodoModel and use the static var:

import {Input, Component, View, NgClass} from "angular2/angular2";
import {TodoModel} from './todoService';

@Component({
selector: '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;
}