[Angular 2] Template property syntax
Angular Property Template syntax
2023-09-14 09:00:55 时间
This lesson covers using the [input] syntax to change an element property such as “hidden” or “content-editable”. Using properties eliminates the need for Angular 1’s old directives such as ng-show and ng-hide as you’re now able to directly access any property on your element.
todoService.ts
export class TodoModel{ status: string = "started"; constructor( public title: string = "" ){} toggle(): void{ if(this.status === "started") this.status = "completed"; else this.status = "started"; } }
todoList.ts
import {Component, View, NgFor} from 'angular2/angular2'; import {TodoService} from './todoService'; @Component({ selector: 'todo-list' }) @View({ directives: [NgFor], template: ` <div> <div *ng-for="#todo of todoService.todos"> <span [content-editable]="todo.status === 'started'">{{todo.title}}</span> <button (click)="todo.toggle()">Toggle</button> </div> </div> ` }) export class TodoList{ constructor( public todoService:TodoService ){ } }
相关文章
- 【Angular专题】——(2)【译】Angular中的ForwardRef
- [Angular 8] Keep original DOM structure with ng-container
- [Angular CLI] Build application without remove dist folder for Docker Volume
- [Angular] Expose Angular Component Logic Using State Reducers
- [Angular 2] *ngFor
- [Angular 2] @Input Custom public property naming
- [Angular 2] Using events and refs
- [Angular 2] Template property syntax
- [Angular] Introduction to Angular Internationalization (i18n)
- [Angular 2] Get start with Firebase
- [Angular 2] Adding a data model
- ngCloak 实现 Angular 初始化闪烁最佳实践
- Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
- Angular 如何使用 InjectionToken 的方式得到当前 location 信息