[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.
- 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] Template property syntax的更多相关文章
- [Angular2 Form] Angular 2 Template Driven Form Custom Validator
In this tutorial we are going to learn how we can also implement custom form field validation in Ang ...
- [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 usin ...
- ASP.NET Core + Angular 2 Template for Visual Studio
多个月以来,我和多个Github上的社区贡献者一起建立支持库.包,我们最终的目的是希望完成这样一个作为起点的模板,也就是基于把Typescript代码和Angular2宿主在ASP.NET Core项 ...
- [Angular] New async 'as' syntax and ngIf.. else
From Anuglar v4 above, we are able to using 'as' with async pipe. This allow as using 'new variable' ...
- [Angular] Create a custom validator for template driven forms in Angular
User input validation is a core part of creating proper HTML forms. Form validators not only help yo ...
- Exploring the Angular 1.5 .component() method
Angular 1.5 introduced the .component() helper method, which is much simpler than the.directive() de ...
- 来自 Thoughtram 的 Angular 2 系列资料
Angular 2 已经正式 Release 了,Thoughtram 已经发布了一系列的文档,对 Angular 2 的各个方面进行深入的阐释和说明. 我计划逐渐将这个系列翻译出来,以便对大家学习 ...
- Angular概念纵览
Conceptual Overview Template(模板): HTML with additional markup (就是增加了新的标记的HTML) Directive(指令): extend ...
- ES6 Syntax and Feature Overview
View on GitHub Note: A commonly accepted practice is to use const except in cases of loops and reass ...
随机推荐
- 《bunzip2命令》-linux命令五分钟系列之八
本原创文章属于<Linux大棚>博客. 博客地址为http://roclinux.cn. 文章作者为roc 希望您能通过捐款的方式支持Linux大棚博客的运行和发展.请见“关于捐款” == ...
- meta里面的viewport属性
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, ...
- 极简主义,对逻辑操作符||和&&深度运用的理解
丧心病狂的代码压缩好像违背了愉快阅读的本真,所以刨根问底想要了解个究竟,最后发现这不只是前端大牛装逼卖萌的绝技,也是代码洁癖爱好者的利器,毕竟这样看上去确实蛮优雅的; 一开始,我们接触到的代码是这样的 ...
- 检测js代码是否已加载的判断代码
该方法不局限于jQuery的检测,对与任何Javascript变量或函数都是通用的. 当前网页加载jQuery后,jQuery()或$()函数将会被定义,所以检测jQuery是否已经加载存在以下2种方 ...
- shell脚本获取mysql插入数据自增长id的值
shell脚本获取mysql插入数据自增长id的值 在shell脚本中我们可以通过last_insert_id()获取id值,但是,需要注意的是,该函数必须在执行插入操作的sql语句之后,立即调用,否 ...
- Adobe Photoshop CS或者CC卸载不了怎么办?
有木有没有遇到这个问题的同学?使用Adobe Creative Suite CleanerToo工具下载就好了~ 下载地址:http://pan.baidu.com/s/1pJ3aBsn
- inux 下c/c++ 连接mysql数据库全过程-----已经通过验证
安装Mysql(还可以下载 .gz包,解压安装,再此只介绍此法,其实都一样了,或百度一下...重点在下下下下面) 1.首先安装Mysql服务器 sudo apt-get install mysql-s ...
- PHP中的MVC
在PHP中使用MVC越来越流行了,特别是在一些开源的框架当中.MVC足以应对大多数的情况,但还有一些情况是其不太适合的,如比较简单的个人博客,对于只有几百篇文章量级的博客,使用MVC让人觉得有些太复杂 ...
- Tunnel Warfare
hdu1540:http://acm.hdu.edu.cn/showproblem.php?pid=1540 题意:给你一列村庄,每个村庄给一个标号,1--n,然后毁掉一些村庄,或者重建几个村庄,重建 ...
- 加载dll、lib库
2.是关于如何加载dll或lib库的.可以看这篇bog Qt调用dll中的功能函数点击打开链接 ************************************************** ...