Angular 2 templates use a special Async pipe to be able to render out Observables. This lesson covers the syntax used to create an Observable in Angular 2 and then to render it out in the template.

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/interval' @Component({
selector: 'app',
template: `<h1>{{clock | async}}</h1>`
}) class App {
clock = Observable.interval();
} bootstrap(App);

[Angular 2] Rendering an Observable with the Async Pipe的更多相关文章

  1. [Angular 2] Rendering an Observable Date with the Async and Date Pipes

    Instead of simply pushing numbers on a timer into the template, now we'll move on to pushing actual ...

  2. [Angular 2] Passing Observables into Components with Async Pipe

    The components inside of your container components can easily accept Observables. You simply define ...

  3. [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword

    Angular allows us to conveniently use the async pipe to automatically register to RxJS observables a ...

  4. [Angular 2] Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects

    Each time you use the Async Pipe, you create a new subscription to the stream in the template. This ...

  5. [Angular] Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

    The network may be unreliable and loading data may take time. Thus it is important to give the user ...

  6. [Angular] Pluck value from Observable

    export class MailFolderComponent implements OnInit{ title: Observable<string>; messages: Obser ...

  7. Angular 学习笔记 ( timezone + moment + material date-picker + date pipe + asp.net core )

    参考 : https://stackoverflow.com/questions/29979609/time-conversion-with-timezoneinfo-for-past-years h ...

  8. [Angular 2] Filter items with a custom search Pipe in Angular 2

    This lessons implements the Search Pipe with a new SearchBox component so you can search through eac ...

  9. [Angular 2] Handle Reactive Async opreations in Service

    When you use ngrx/store and you want to fire a service request. When it sucessfully return the respo ...

随机推荐

  1. javascript判断值是否undefined

    function isUndefined(variable) { return typeof variable == 'undefined' ? true : false; }

  2. android - 调试

    在android总调试程序,不同于普通的java程序,我们可以通过'Windows->Show View->Other->LogCat"打开'LogCat'工具,选择下拉选 ...

  3. 各版本 linux(转)

    Linux各种版本下载 ftp://ftp.linuxforum.net/ISO/Redhat7.3/valhalla-i386-disc1.iso ftp://ftp.linuxforum.net/ ...

  4. 17个提升iOS开发效率的必用工具

    时间就是金钱.编码效率的提升意味着更多的收入.可是当我们的开发技巧已经到达一定高度时,如何让开发效率更上一层楼呢?答案就是使用开发工具!在这篇文章中,我会向你介绍一些帮助我们提升编码速度和工作效率的工 ...

  5. mybatis 一对一关联

    首先建表: CREATE TABLE teacher( t_id INT PRIMARY KEY AUTO_INCREMENT, t_name VARCHAR(20) ); CREATE TABLE ...

  6. jQuery autoResize

    这是一个用jQuery实现的, 自动调整textarea高度, 非常的好!但原作者已经把它的相关描述页面移除了, 这里做个备份吧~但js路径还在:full: http://james.padolsey ...

  7. C语言基础学习运算符-基本算术运算符

    C语言中用于基本算术运算的运算符有:+,-,*,%,/.这些运算符的用法和你想像到的基本无异: 加法运算符 “+”使得它两侧的值被加到一起. 减法运算符“-”用它前面的数减去后面的数. 乘法由“*”表 ...

  8. hdu 4548 第六周H题(美素数)

    第六周H题 - 数论,晒素数 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   De ...

  9. js 冒泡事件的处理

    onMouseOver 和 onMouseOut事件冒泡 当事件在某一DOM元素被触发时,例如用户在某个节点上点击鼠标,事件将跟随着该节点继承的各个父节点冒泡穿过整个DOM的节点层次,直到它遇到依附有 ...

  10. 一起学习iOS开发专用词汇,每天记3个,助你变大牛-b

    大家做开发最大的问题是什么?英语的问题应该困扰很多的同学的地方,我们提倡科学学习开发中的常用词汇.我们不要求大家有特别好的听.说.写,只要能够记住,能够认识这些常用词汇你以后的开发也将游刃有余.我们的 ...