{"flag":true,"single":true,"pageTitle":"Observables  in angular |Responce , Error & Completion of Observable  | Angular 15+","post":{"id":76,"user_id":"1","slug":"observables-in-angular-responce-error-completion-of-observable-angular-15--2018","title":"Observables  in angular |Responce , Error & Completion of Observable  | Angular 15+","body":"<p>Javascript is <strong>single threaded <\/strong>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<br>Async code execute in background &amp; &nbsp;our main thread not got blocked<br><strong>Promise:<\/strong><br>request sent to server&gt; service take some time to get data ie 100 users &gt; and sent back responce<br>promise provide data when its completely ready, so we will get data or error object<\/p>\r\n<p><strong>OBSERVABLE:<\/strong> same as promise but its send the data in packets ,&nbsp;<br>observable send data only if its used by someone else not send<br>its not native its provided by rxjs library<\/p>\r\n<p>1. make an observable<br>2. create a subscriiber if no subscriber observable not emit any data<\/p>\r\n<p>home.component.js<\/p>\r\n<pre class=\"language-markup\"><code>import { Component } from '@angular\/core';\r\nimport {Observable} from 'rxjs';\r\n@Component({\r\n  selector: 'app-home',\r\n  templateUrl: '.\/home.component.html',\r\n  styleUrls: ['.\/home.component.css'],\r\n})\r\nexport class HomeComponent {\r\n  constructor(){}\r\n  myObservable = new Observable((observer)=&gt;{ \/\/observer is subscriber wating for data\r\n    console.log(\"OBS Starts\");\r\n    setTimeout(()=&gt;observer.next(\"1\"),1000) ;\r\n    setTimeout(()=&gt;observer.next(\"2\"),2000) ;\r\n    setTimeout(()=&gt;observer.error(new Error(\"Sonething went wrong\")),1000) ; \/\/after one second error also generated + not responce other data \r\n    \/\/setTimeout(()=&gt;observer.complete(),2000) ; \/\/once completed never return other data \r\n    setTimeout(()=&gt;observer.next(\"3\"),3000) ;\r\n  });\r\n\r\n  ngOnInit(){\r\n    this.myObservable.subscribe(\r\n      (val)=&gt;{\r\n      console.log(val);\r\n      },\r\n      (err)=&gt;{\r\n        console.log(\"error is here \"+err.message);\r\n      },\r\n      ()=&gt;{\r\n        console.log(\"completed\");\r\n      }\r\n    ); \/\/all parameters, next, error, complete are optional\r\n  }\r\n}\r\n<\/code><\/pre>","category_id":"13","is_private":"0","created_at":"2023-03-29T00:46:18.000000Z","updated_at":"2023-03-29T00:46:18.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"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 - Observables  in angular |Responce , Error & Completion of Observable  | Angular 15+ (Updated: March 29, 2023) - Read more about Observables  in angular |Responce , Error & Completion of Observable  | Angular 15+ at my programming site [SITE]","categories":[]}