Angular 9 Tutorial For Beginners #54 - Observable 

Angular 9 Tutorial For Beginners #54 - Observable 1. Observable is part of RxJs library 2. import observable into our component where we want to make use of it 3. Observable is a sequence of data that is emitted over period of time 4. This data can be of any time - string , events, etc 5. Angular uses observable very frequently in most aysnc operations - HTTP, Routing, Event Handling 6. In order to listen and track the changes of observable - we need observer 7. The observer will continuously track the changes in observable 8. Observer has methods like - next (), error (), complete() 9. Observable as it - is useless unless we subscribe it 10. By subscribe we mean that we are processing the data/values by observable over period of time 11. We can have multiple subscribers to our observable 12. We can also unsubscribe from a subscriber Example: Shopping Cart - Initial Order - InProgress - Processing - Trasit - Delivered - Completed component.ts import { Component, OnInit } from '@angular/core'; import { Observable, Subscriber } from 'rxjs'; @Component({ selector: 'app-observable', templateUrl: './observable.component.html', styleUrls: ['./observable.component.scss'] }) export class ObservableComponent implements OnInit { orderStatus: any; data: Observable; constructor() { } ngOnInit(): void { this.data = new Observable(o => { //Business Logic comes here setTimeout(() => { o.next('In Progress'); }, 4000); //Business Logic comes here setTimeout(() => { o.next('Processing'); }, 8000); //Business Logic comes here setTimeout(() => { o.next('Trasit'); }, 12000); //Business Logic comes here setTimeout(() => { o.next('Delivered'); }, 16000); //Business Logic comes here setTimeout(() => { o.next('Completed'); }, 20000); // //if any error setTimeout(() => { o.error(); }, 8000); // It will no more track or listen the changes. setTimeout(() => { o.complete(); }, 10000); setTimeout(() => { o.next('Msg after Completed executed'); }, 20000); }); //first subscription this.data.subscribe(o => { this.orderStatus = o; }); //second subscription -> val2 // this.data.subscribe(val2 => { this.orderStatus = val2; }); } } component.html Order Status - {{orderStatus}}

Very clear explanation

Hi . thank you very much the only one tutorial that I found online that explain what is observable and how it keep observer inside it !!!

Thank you so much sir for each great video. I wish I could work for you someday to spend time in such a great Team of yours and I am proud of you saying, my Teacher :)

Sir you are awesome! Please make a complete tutorial about angular inside one course. Like building a todos or a shopping cart, going through all angular stuff in it. 🙏 may God bless you

Incredibly clear! Thank you!

Excellent explanation and presentation.

Best example you gave. Thank you..

Thank you so much for explaining in such detail . Your teaching style is awesome. Simple and effective . Just subscribe you won't regret 🙏

Thanks for the lesson But actually, when I opened this video, I closed it because your voice is too low, please take care of your voice

You teach very simple way tnx sir

Sir u r the best

Hi sir, can we observe any change in drop-down and input values by using observable..

Heyy! One doubt " .next() in observer.next() calls the next value, so would like to know how the first observer.next() gets called? "

Thanks for the video , you explained very well

Hi, I have doubt for multiple subscriptions. Can you please give any real time example, where we can use multiple subscription for single observer.

Hi.. Where is that app, which folders are there.. cart and product and all components.. Login and all.. I want to learn to build whole app.. So If you have made any such videos, then please share me a link

Hi, I have doubts regarding observables. Actually, we can write API calls(one after another one) without using observables. but why we need to use observables, what is the use of observables?

thank for the video sir..One request could you also pls explain the way to emit the events without using Observer?. sry if this is a dumb question.

What is the difference between observables vs subject ? Why do we need to make subject as observable??

Please Make Videos on Angular NgRx

Sir, what are the languages should I need to learn to become backend developer? Because, I almost completed front-end development. So I think it's better to move on back-end side. Please tell me sir what are skills required to become back-end development.

a quick one , suppose a business logic takes more time than allocated what happens?

(property items does not exist on type formgroup) i m unable to solve this error please help me with this

In 20 mins 10 advertisements, never seen for any quality video

Hlo sir i am searching video on @Input and @output but i didn't get it in this series

Hi Sridhar, Can i get ppt or Pdf of this entire Angular9 Tutorial

How can I display on browser {{my name is nawab }}, and {my name} becz curly braces is used for binding data..

Please make a video about promise and observables

Is it necessary to write logic in ngOnInit()???

this is showing error in Angular 11 data : Observable; ERROR- Property 'data' has no initializer and is not definitely assigned in the constructor. so what is the alternative for this, if you can please guide.

I see your voice going lower and lower as you proceed..

Please increase the volume man cant hear u even at full volume

Hi Sridhar, I am a beginner in Angular. When I install Angular/cli, I do not see the e2e folder. Do you have any idea why is that happening. Is e2e important for my application?

data:Observable ;Error:Property 'data' has no initializer and is not definitely assigned in the constructor.

Hi Sir good explanation thanks but your voice is very low for audio for all your videos....

good afternoon sir ..... data: Observable; data is giving error

When I create new observable inside Init, it show 'Unexpected token. A constructor, method, accessor, or property was expected.'

why we use observer.error

Scope can u plse explain sir

Thank you so much sir , you are a great Teacher

sir here second subcription is printing multiple times

Sir what is use of error type and what does it do

Sir hindi main vedio kab aane wali hai

very practical.....

HI thanks for the tutorial its very usefull for me. but i have one question: this.datos.subscribe(val => { this.order = val; console.log('VAL: ' + this.order); }); in this part of the code the log method is not working for me.! why?

Why cant i get data.next() and data.complete methods ? is data is not an observer here? this.authservice.registerform(form).subscribe(data => { data.? (not working for complete and next) this.ifsuccess = true; this.timer = setInterval(() => { this.router.navigate(['']); }, 1200); }); registerform(data): Observable{ return this.httpclient.post('localhost:3000/login',data); } Please help ! Your videos helped me a lot to improve in angular as a beginner, Thanks to you

can you share extension you use in vs code for angular.

Sridhar, Getting below error when use error and complete method. Cannot read property 'ngOriginalError' of undefined Code : import { Component, OnInit } from '@angular/core'; import { Observable, Subscriber } from 'rxjs'; @Component({ selector: 'app-observable', templateUrl: './observable.component.html', styleUrls: ['./observable.component.scss'] }) export class ObservableComponent implements OnInit { orderStatus: any; data: Observable; constructor() { } ngOnInit(): void { this.data = new Observable(o => { //Business Logic comes here setTimeout(() => { o.next('In Progress'); }, 4000); //Business Logic comes here setTimeout(() => { o.next('Processing'); }, 8000); //Business Logic comes here setTimeout(() => { o.next('Trasit'); }, 12000); //Business Logic comes here setTimeout(() => { o.next('Delivered'); }, 16000); //Business Logic comes here setTimeout(() => { o.next('Completed'); }, 20000); // //if any error setTimeout(() => { o.error(); }, 8000); // It will no more track or listen the changes. setTimeout(() => { o.complete(); }, 10000); setTimeout(() => { o.next('Msg after Completed executed'); }, 20000); }); //first subscription this.data.subscribe(o => { this.orderStatus = o; }); //second subscription -> val2 // this.data.subscribe(val2 => { this.orderStatus = val2; }); } }

How to handle race condition in angular

Plz make a full tutorial for rxjs

Sir your voice is not audible...

Speak louder next time, please ;)

I think your voice in video is too low

Sir copy paste karke bhi errror aa rhe hai plz support sir

Saw 6 advertises in this one video. Too much distraction.

not clear

Hey, can you please share the notes?

error.. can't solve this "

Hi sir could u Pls share the notes and PPT I have sent a mail

Sir plz hindi main play list lake aao na aapki jo bhi fees hogi de dunga

spam

How can I contact you