angular4 example

by RFontana

HTML

<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.5/dist/zone.min.js"></script>
<script src="https://unpkg.com/rxjs@5.2.0/bundles/Rx.min.js"></script>
<script src="https://unpkg.com/@angular/core@4.0.1/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/common@4.0.1/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/compiler@4.0.1/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser@4.0.1/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser-dynamic@4.0.1/bundles/platform-browser-dynamic.umd.js"></script>
<foo-app></foo-app>

TypeScript

let { Component, NgModule, ViewChild } = ng.core;

@Component({
  selector: 'my-foo',
  template: `
  	<h1>Polling</h1>
    <span>{{ polling$ | async }}</span>
  `
})
class FooComponent implements OnDestroy {
    private static rands = ['randy', 'foo', 'rick', 'chaos', 'morty', 'bar'];
    private static getSomeObservable() {
    		let rand = FooComponent.rands[Math.floor(Math.random()*FooComponent.rands.length)];
        return Rx.Observable.from(rand).delay(0).share();
    }
		private polling$: Rx.Observable<string>;
    constructor() {
    		let a$ = Rx.Observable.from('foo').delay(0);
        let b$ = Rx.Observable.from('bar').delay(0);
    		let zip$ = Rx.Observable.zip(a$, b$);
        this.polling$ = zip$.concatMap(function(){
        	return this.poll();
        }.bind(this));
    }
    private poll(){
    		console.debug('polling');
        let current$ = FooComponent.getSomeObservable();
        let next$ = current$.delay(2000).concatMap(function(){
        	return this.poll();
        }.bind(this));
        return Rx.Observable.merge(current$, next$);
    }
}

@Component({
	selector: 'foo-app',
  template: `
  	<my-foo *ngIf="foo"></my-foo>
    <button (click)="unfoo()">destroy</button>
  `
})
class FooApp {
  @ViewChild(FooComponent) myFoo: FooComponent;
  private foo = true;
	private unfoo() {
    this.foo = false;
  }
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ FooComponent, FooApp ],
  bootstrap:    [ FooApp ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);