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. leetcode修炼之路——350. Intersection of Two Arrays II

    题目如下: Given two arrays, write a function to compute their intersection. Example: Given nums1 = [1, 2 ...

  2. Android Marquee

    android:singleLine="true" android:marqueeRepeatLimit="marquee_forever" android:e ...

  3. 抓取锁的sql语句-第二次修改

    CREATE OR REPLACE PROCEDURE SOLVE_LOCK AS V_SQL VARCHAR2(3000);  --定义 v_sql 接受抓取锁的sql语句 CUR_LOCK SYS ...

  4. [转] iOS TableViewCell 动态调整高度

    原文: http://blog.csdn.net/crayondeng/article/details/8899577 最近遇到了一个cell高度变化的问题,在找解决办法的时候,参考了这篇文章,觉得不 ...

  5. MySQL 删除数据库

    MySQL 删除数据库 使用 mysqladmin 删除数据库 使用普通用户登陆mysql服务器,你可能需要特定的权限来创建或者删除 MySQL 数据库. 所以我们这边使用root用户登录,root用 ...

  6. angularJS学习手册(1)

    欢迎来到augularJS的学习 一.什么是angularJS? angular的英文意思是角,为什么要叫angular我也不知道. AngularJS是一个MV*(Model-View-Whatev ...

  7. http请求的cookie

    Cookie的作用: Cookie是用于维持服务端会话状态的,通常由服务端写入,在后续请求中,供服务端读取. HTTP请求,Cookie的使用过程 1.server通过HTTP Response中的& ...

  8. thinkphp对文件的上传,删除,下载操作

    工作需要,整理一下最近对php的学习经验,希望能对自己有帮助或者能帮助那些需要帮助的人. thinkphp对文件的操作,相对来说比较简单,因为tp封装好了一个上传类Upload.class.php 废 ...

  9. OpenGL旋转平移 变换

    #include<gl/glut.h> #include<gl/GL.h> #include<gl/GLU.h> #include<math.h> #i ...

  10. asp.net Server.HtmlEncode和HtmlDecode

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">< ...