[Angular 2] ng-class and Encapsulated Component Styles
Angular and Class Component NG styles
2023-09-14 08:59:20 时间
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; }
相关文章
- [ngx-formly] Dynamically disable a Form field with Angular Formly
- [Angular] Control the dependency lookup with @Host, @Self, @SkipSelf and @Optional
- [Angular] Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe
- [Angular] Create a custom pipe
- [Angular] Difference between ViewChild and ContentChild
- [Angular Form] ngModel and ngModelChange
- [Angular Testing] Unit Testing -- Test component and service.
- [Angular 2] Start with Angular2
- [Angular 2] ng-control & ng-control-group
- [Angular] Provide Feedback to Progress Events with Angular’s HttpRequest Object
- [Angular & Unit Testing] Testing Component with Store
- [Angular] Use :host-context and the ::ng-deep selector to apply context-based styling
- [Angular] Use Angular’s @HostBinding and :host(...) to add styling to the component itself
- [Angular] AuthService and AngularFire integration
- [Angular] Zones and NgZone
- [Angular] Difference between ViewChild and ContentChild
- [Angular 2] Writing a Simple Angular 2 Component
- [Angular + Webpack] ocLazyLoad compoment
- 关于COMMIT WORK and COMMIT WORK AND WAIT在SAT中的讨论
- SAP Spartacus 如何取得某个table字段对应的Angular Component
- Angular 如何为多个项目使用单一存储仓库
- Angular 开发中的 Source Map
- Angular页面里元素class的动态绑定的实现源代码调试
- Angular应用的angular.json文件字段一览
- angular基本知识学习笔记 - Component的基本概念