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. 在Cognos报表中使用钻取特性,参数传递

    转载至:http://blog.sina.com.cn/s/blog_6eda1c4e0100mu3t.html Cognos的钻取方式大致可以分为三种: 1.模型固有的->由CUBE和DMR支 ...

  2. UIView之常用方法

    UIView之常用方法 将一个视图添加为子视图,并使之在最上面显示 -(void)addSubView:(UIView *)view; 将指定子视图移动到顶部 -(void)bringSubViewT ...

  3. CSS 布局Float 【2】

    1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. 1.2 浮动层 浮动层:给元素的float属性赋值后,就 ...

  4. centos yum

    1.介绍 yum(全 称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器 ...

  5. cocos2dx lua调用C++类.

    最近需求所迫, 终于着手传说中的 lua 了. 折腾了4天, 总算大概搞明白了用法. 细节咱们就别谈了, 直接说项目里怎么跑起来. 准备工作 我们需要一系列繁琐的前奏. tolua++: 这是必备工具 ...

  6. 解析一下rtmp协议比较难懂的地方

    官方文档写的过于复杂,这里弄个简单的好入门的.chunk 分基础头,消息头,时间戳,数据部分基础头中第一个字节最高位的两个位是用来设置消息头的四种格式的,和基础头没关系,整个基础头有3个字段的长度存储 ...

  7. 巧用C#做中间语言 实现Java调用.net DLL

    本文将详细为大家介绍一个java调用.net DLL的方法,以实现特殊的客户的特殊要求:“在Java项目中必须使用其提供的用.net写的DLL加密机制!” 环境与工具: ◆.net framework ...

  8. linux文件系统结构和权限

    linux文件系统的目录结构 熟话说的好,好记性不如烂笔头,虽然没用笔,但动动手指还是可以的.下面的目录结构都是摘抄过来的,动动手指来加深下印象吧,还能练习下打字速度,哈哈,多好啊. ...突然又改变 ...

  9. phalcon在phpstorm里的配置视频

    phalcon在phpstorm里的配置视频:http://www.tudou.com/programs/view/yXw6e_Rshwk/

  10. C语言基础学习基本数据类型-浮点型

    float和double 加了小数点的数都是浮点数.C语言有两种书写浮点数的方式,一种是使用常用的标准小数点表示法,如下: 0.00056 8.0 1.23 第二种表示浮点值叫做E表示法.下面是一些例 ...