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