[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

}

巴特西

[Angular 2]ng-class and Encapsulated Component Style2

最新文章

热门文章