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. 《第一行代码》学习笔记1-Android系统架构

    1. 2003.10,Andy Rubin创办Android公司.2005.8,Google收购之,并于2008年推出Android系统第一个版本. 2. ①Linux Kernel:基于Linux ...

  2. 【windows开发实现记事本程序——界面篇】

    前言 从毕业开始学习windows UI编程,工作中总是和一些API打交道,但是从没有做过一个完整的界面程序.因此打算自己利用空余时间做一个小的项目来总结自己所学的东西.在网上看到许多人建议自己动手写 ...

  3. Debian ls 文件 文件夹颜色显示

    一.让debian终端文件显示不同颜色 vim  /etc/vim/vimrc取消“syntax on”的注释 二.让debian终端文件夹显示不同颜色 修改.bashrc文件,vim /root/. ...

  4. struts1、ajax、jquery、json简单实例

    1.页面ajax代码,使用$.ajax,获得json对象后each $.ajax({ type:"GET", url:ctx + "/uploadImg.do" ...

  5. 002.AngularJs调用Restful实现CRUD

    本节我们主要给大家介绍AngularJs如何调用Restful,实现数据的CRUD. 主要用到的技术: 后端:ASP.NET WebApi + SQLServer2008 前端:AngularJs,B ...

  6. PHP图形计算器(计算三角形矩形周长面积)

    运用PHP面向对象的知识设计一个图形计算器,同时也运用到了抽象类知识,这个计算器可以计算三角形的周长和面积以及矩形的周长和面积.本图形计算器有4个页面:1.PHP图形计算器主页index.php;   ...

  7. struts2.xml的配置与技巧

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...

  8. bzoj2534: Uva10829L-gap字符串

    Description 有一种形如uvu形式的字符串,其中u是非空字符串,且V的长度正好为L,那么称这个字符串为L-Gap字符串 给出一个字符串S,以及一个正整数L,问S中有多少个L-Gap子串. I ...

  9. iOS App转让流程

    说法一: (1)选择转让APP (2)进入转让界面       点击Continue进入下一步   (3)输入对方的APP ID和Team ID     Apple ID 和 Team ID 可以在m ...

  10. 创建局域网内远程git仓库,并将本地仓库push推到远程仓库中

    转载请注明出处 http://www.goteny.com/articles/2014/06/136.html http://www.cnblogs.com/zjjne/p/3778640.html ...