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

  1. export class TodoModel{
  2. status: string = "started";
  3. constructor(
  4. public title: string = ""
  5. ){}
  6.  
  7. toggle(): void{
  8. if(this.status === "started") this.status = "completed";
  9. else this.status = "started";
  10. }
  11. }

todoList.ts

  1. import {Component, View, NgFor} from 'angular2/angular2';
  2. import {TodoService} from './todoService';
  3.  
  4. @Component({
  5. selector: 'todo-list'
  6. })
  7. @View({
  8. directives: [NgFor],
  9. template: `
  10. <div>
  11. <div *ng-for="#todo of todoService.todos">
  12. <span [content-editable]="todo.status === 'started'">{{todo.title}}</span>
  13. <button (click)="todo.toggle()">Toggle</button>
  14. </div>
  15. </div>
  16. `
  17. })
  18.  
  19. export class TodoList{
  20. constructor(
  21. public todoService:TodoService
  22. ){
  23.  
  24. }
  25. }

[Angular 2] Template property syntax的更多相关文章

  1. [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 ...

  2. [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 ...

  3. ASP.NET Core + Angular 2 Template for Visual Studio

    多个月以来,我和多个Github上的社区贡献者一起建立支持库.包,我们最终的目的是希望完成这样一个作为起点的模板,也就是基于把Typescript代码和Angular2宿主在ASP.NET Core项 ...

  4. [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' ...

  5. [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 ...

  6. Exploring the Angular 1.5 .component() method

    Angular 1.5 introduced the .component() helper method, which is much simpler than the.directive() de ...

  7. 来自 Thoughtram 的 Angular 2 系列资料

    Angular 2 已经正式 Release 了,Thoughtram 已经发布了一系列的文档,对 Angular 2 的各个方面进行深入的阐释和说明. 我计划逐渐将这个系列翻译出来,以便对大家学习 ...

  8. Angular概念纵览

    Conceptual Overview Template(模板): HTML with additional markup (就是增加了新的标记的HTML) Directive(指令): extend ...

  9. ES6 Syntax and Feature Overview

    View on GitHub Note: A commonly accepted practice is to use const except in cases of loops and reass ...

随机推荐

  1. 《bunzip2命令》-linux命令五分钟系列之八

    本原创文章属于<Linux大棚>博客. 博客地址为http://roclinux.cn. 文章作者为roc 希望您能通过捐款的方式支持Linux大棚博客的运行和发展.请见“关于捐款” == ...

  2. meta里面的viewport属性

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, ...

  3. 极简主义,对逻辑操作符||和&&深度运用的理解

    丧心病狂的代码压缩好像违背了愉快阅读的本真,所以刨根问底想要了解个究竟,最后发现这不只是前端大牛装逼卖萌的绝技,也是代码洁癖爱好者的利器,毕竟这样看上去确实蛮优雅的; 一开始,我们接触到的代码是这样的 ...

  4. 检测js代码是否已加载的判断代码

    该方法不局限于jQuery的检测,对与任何Javascript变量或函数都是通用的. 当前网页加载jQuery后,jQuery()或$()函数将会被定义,所以检测jQuery是否已经加载存在以下2种方 ...

  5. shell脚本获取mysql插入数据自增长id的值

    shell脚本获取mysql插入数据自增长id的值 在shell脚本中我们可以通过last_insert_id()获取id值,但是,需要注意的是,该函数必须在执行插入操作的sql语句之后,立即调用,否 ...

  6. Adobe Photoshop CS或者CC卸载不了怎么办?

    有木有没有遇到这个问题的同学?使用Adobe Creative Suite CleanerToo工具下载就好了~ 下载地址:http://pan.baidu.com/s/1pJ3aBsn

  7. inux 下c/c++ 连接mysql数据库全过程-----已经通过验证

    安装Mysql(还可以下载 .gz包,解压安装,再此只介绍此法,其实都一样了,或百度一下...重点在下下下下面) 1.首先安装Mysql服务器 sudo apt-get install mysql-s ...

  8. PHP中的MVC

    在PHP中使用MVC越来越流行了,特别是在一些开源的框架当中.MVC足以应对大多数的情况,但还有一些情况是其不太适合的,如比较简单的个人博客,对于只有几百篇文章量级的博客,使用MVC让人觉得有些太复杂 ...

  9. Tunnel Warfare

    hdu1540:http://acm.hdu.edu.cn/showproblem.php?pid=1540 题意:给你一列村庄,每个村庄给一个标号,1--n,然后毁掉一些村庄,或者重建几个村庄,重建 ...

  10. 加载dll、lib库

    2.是关于如何加载dll或lib库的.可以看这篇bog   Qt调用dll中的功能函数点击打开链接 ************************************************** ...