[Angular 2] Template property syntax

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){}
}

转载于:https://www.cnblogs.com/Answer1215/p/4910173.html

[Angular 2] Template property syntax相关推荐

Angular HTML template的解析位置
文件: compiler.umd.js path: turbo_modules/@angular/compiler@9.1.12/bundles: 函数名:TemplateParser.prototy ...
ASP.NET Core + Angular 2 Template for Visual Studio
多个月以来,我和多个Github上的社区贡献者一起建立支持库.包,我们最终的目的是希望完成这样一个作为起点的模板,也就是基于把Typescript代码和Angular2宿主在ASP.NET Core项 ...
To avoid scope ambiguity, the default slot should also use ＜template＞ syntax when there are other na
具名插槽 https://cn.vuejs.org/v2/guide/components-slots.html <base-layout><template v-slot:head ...
Angular里的property binding的一个例子
如果src不加中括号,hero.url会被当成静态的字符串,传递给src属性: 当然最后啥图片也不会显示出来: 正确的办法:实现一个get函数,返回正确的图片url: Component模板源代码: ...
Angular Component template函数执行上下文的对象
下图第1行代码,定义的model变量,在Chrome调试器里的名称不是model,而是model_r1:
angular react_Angular 2 vs React：将会有鲜血
angular react Angular 2 has reached Beta and appears poised to become the hot new framework of 2016. ...
Angular component的一个例子
官网:https://angular.io/guide/architecture-components Before a view is displayed, Angular evaluates th ...
在Angular专家Dan Wahlin的免费33部分课程中学习Angular
According to the Stack Overflow developer survey 2018, Angular is one of the most popular frameworks ...
Angular form学习笔记
https://angular.io/start/start-forms Angular里的form分成两部分: the objects that live in the component to s ...

[Angular 2] Template property syntax

[Angular 2] Template property syntax相关推荐

最新文章

热门文章