observable

observable.ts

import { Component,OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
 
  title = 'app';
  observable$;

  ngOnInit(){
     this.observable$ = Observable.create((observer) => {
      observer.next(1);
      observer.next(2);
      observer.next(3);
      observer.complete();
    });
    this.observable$.subscribe(
      value => console.log(value),
      err => {},
      () => console.log('this is the end')
    );
  }

  //This is to make sure observable should not live when move to different pages.
  //This makes sure no memory leaks
  ngOnDestroy(): void {
   this.observable$.unsubscribe();
  }

  //A subject is both observable and observer.once you define a subject, it means you will have access
  //to next, complete outside observable.
}