Observables, RxJS

ng2_observables.ts

// Observables (= streams) open up a continuous channel of communication in which multiple values of data can be emitted over time. 
// a pattern of dealing with data by using array-like operations to parse, modify and maintain data

// The subscribe pattern
// ----------------------

import {Component} from '@angular/core';
import {Observable} from 'rxjs/Observable';

@Component({
    selector: 'app',
    template: `
      <b>Angular 2 Component Using Observables!</b>

      <h6 style="margin-bottom: 0">VALUES:</h6>
      <div *ngFor="let value of values">- {{ value }}</div>

      <h6 style="margin-bottom: 0">ERRORs:</h6>
      <div>Errors: {{anyErrors}}</div>

      <h6 style="margin-bottom: 0">FINISHED:</h6>
      <div>Finished: {{ finished }}</div>

      <button style="margin-top: 2rem;" (click)="init()">Init</button>
    `
})
export class MyApp {

  private data: Observable<Array<string>>;
  private value: string;
  private subscribed: boolean;
  private status: string;

    init() {

        this.data = new Observable(observer => {
            let timeoutId = setTimeout(() => {
                observer.next('You will never see this message');
            }, 2000);

            this.status = 'Started';

            return onUnsubscribe = () => { // useless
                this.subscribed = false;
                this.status = 'Finished';
                clearTimeout(timeoutId);
            }
        });

        let subscription = this.data.subscribe(
            value => this.value = value,
            error => console.log(error),
            () => this.status = 'Finished';
        );
        this.subscribed = true;

        setTimeout(() => {   // useless
          subscription.unsubscribe();
        }, 1000);
    }

}
    
// when you call .unsubscribe() you are destroying the subscription object that is listening, 
// therefore the on-complete event attached to that subscription object will not get called.
// In most cases we will not need to explicitly call the unsubscribe method 
// unless we want to cancel early or our Observable has a longer lifespan than our subscription. 
// The default behavior of Observable operators is to dispose of the subscription as soon as .complete() or .error() messages are published.
    
// The Foreach pattern
// --------------------
// The forEach call only accepts the 'next value' callback as an argument; it then returns a promise instead of a subscription.

Observable.of(1, 2, 3).forEach(doSomething) 

// as being semantically equivalent to:

new Promise((resolve, reject) => {
  Observable.of(1, 2, 3).subscribe(
    doSomething,
    reject,
    resolve);
});