Developer Snippet Diary

Observables in angular |Responce , Error & Completion of Observable | Angular 15+

Javascript is single threaded language all code execute line by line ie if a http request sent to server all remaining code need to wait for responce and then remaining code execute
Async code execute in background &  our main thread not got blocked
Promise:
request sent to server> service take some time to get data ie 100 users > and sent back responce
promise provide data when its completely ready, so we will get data or error object

OBSERVABLE: same as promise but its send the data in packets , 
observable send data only if its used by someone else not send
its not native its provided by rxjs library

1. make an observable
2. create a subscriiber if no subscriber observable not emit any data

home.component.js

import { Component } from '@angular/core';
import {Observable} from 'rxjs';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent {
  constructor(){}
  myObservable = new Observable((observer)=>{ //observer is subscriber wating for data
    console.log("OBS Starts");
    setTimeout(()=>observer.next("1"),1000) ;
    setTimeout(()=>observer.next("2"),2000) ;
    setTimeout(()=>observer.error(new Error("Sonething went wrong")),1000) ; //after one second error also generated + not responce other data 
    //setTimeout(()=>observer.complete(),2000) ; //once completed never return other data 
    setTimeout(()=>observer.next("3"),3000) ;
  });

  ngOnInit(){
    this.myObservable.subscribe(
      (val)=>{
      console.log(val);
      },
      (err)=>{
        console.log("error is here "+err.message);
      },
      ()=>{
        console.log("completed");
      }
    ); //all parameters, next, error, complete are optional
  }
}
Posted by: R GONDAL
Email: rizikmw@gmail.com