[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;
}
时间: 2024-10-03 14:56:50

[Angular 2] ng-class and Encapsulated Component Styles的相关文章

[Angular 2] @ViewChild to access Child component&#39;s method

When you want to access child component's method, you can use @ViewChild in the parent: Parent Component: import {Component, OnInit, ViewChild} from 'angular2/core'; import {HeroService, Hero} from './HeroService'; import {Observable} from 'rxjs/Rx';

Angular(ng表单指令操作)

html部分 ................................................. <!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>Angular(ng表单指令操作)</title> <script src="js

[Angular 2] Generate and Render Angular 2 Template Elements in a Component

Angular 2 Components have templates, but you can also create templates inside of your templates using Angular 2 ViewContainer’s createEmbeddedView for more visual control of how you want to generate elements inside of your Angular 2 templates. import

[Angular 8 Unit Testing] Testing a component

Setting up a Presentational Component: import {Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation} from '@angular/core'; import {Course} from '../model/course'; import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; imp

angular Error: [ng:areq]

在使用augularjs的时候,爆了个错误: 后来经过对比,原来是我的<html>标签多了点东西

[Angular 2] Component relative paths

Oingial aritial --> Link Take away: import { Component, OnInit } from '@angular/core'; @Component({ selector : 'contacts-header', templateUrl: './header.component.html', styleUrls : ['./header.component.css'] }) export class HeaderComponent implement

[Angular] Test component template

Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'stock-counter', changeDetection: ChangeDetectionStrategy.OnPush, template: ` <div class="stock-counter"> &l

angular custom Element 自定义web component

angular 自定义web组件: 首先创建一个名为myCustom的组件. 引入app.module: ... import {customComponent} from ' ./myCustom.component'; @NgModule({ declarations:[AppComponent,customComponent], entryComponents:[customComponent] .... }) export class AppModule{} 全局注册: app.comp

.Net Core + Angular Cli 开发环境搭建

一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul