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. 苹果新政,禁止开发者在App中加入检查更新功能

    今天妥妥的被拒了,苹果更新了新政策,不能在应用中出现检测更新的功能.AppStore会自动提醒用户更新. 去掉更新按钮,之后再尝试下看能通过不能

  2. CSS 布局Float 【2】

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

  3. javascript基础学习(十四)

    javascript之表单对象 学习要点: 表单对象 文本框 按钮 单选框和复选框 一.表单对象 在HTML文档中可能会出现多个表单,也就是说,一个HTML文档中可能出现多个<form>标 ...

  4. 重新开始学习javase_内部类

    转(http://www.cnblogs.com/dolphin0520/p/3811445.html) 内部类: 在Java 1.1 中,可将一个类定义置入另一个类定义中.这就叫作“内部类”.创建内 ...

  5. 嘟!数字三角形 W WW WWW集合!

    哔!数字三角形全体集合! 数字三角形!到! 数字三角形W!到! 数字三角形WW!到! 数字三角形WWW!到! --------------------------------------------- ...

  6. Linux imagemagic(转载)

    原文地址:http://linux.chinaitlab.com/c/803455.html 更多详细使用示例请参考:http://www.ibm.com/developerworks/cn/open ...

  7. mysql 字符串拼接函数CANCAT()与GROUP_CANCAT()

    1.CONCAT() 拼接单行字符串 select concat(‘100’,user_id) from table1; select concat('11','22','33'); 结果 11223 ...

  8. js 刷新页面大全

    一.先来看一个简单的例子: 下面以三个页面分别命名为frame.html.top.html.bottom.html为例来具体说明如何做. frame.html 由上(top.html)下(bottom ...

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

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

  10. sqlserver 进行MD5加密

    官方定义函数: HashBytes ( '<algorithm>', { @input | 'input' } )  <algorithm>::= MD2 | MD4 | MD ...