Angular 9 Tutorial For Beginners #54 - Observable

[@sreenuksr]

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}}

[@ARCTutorials]

Thanks Sreeni!!!

[@yashchukandriy2820]

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 !!!

[@ARCTutorials]

Glad it was helpful!

[@user-cb6bd4sl1v]

Very clear explanation

[@ARCTutorials]

Glad you liked it

[@Adam-gp3ij]

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

[@ARCTutorials]

Hi Adam. I have already create 1 Angular e-commerce module project. I have create more in coming days. Please check this playlist. kzbin.info/www/bejne/f2bMYnqlo9GZfK8

[@azimmalpekar9072]

Excellent explanation and presentation.

[@ARCTutorials]

Glad you enjoyed it!

[@sudhakard1910]

Best example you gave. Thank you..

[@ARCTutorials]

Glad it was helpful! Also check out this detailed tutorial on Observable kzbin.info/www/bejne/raiolot8q7Bor9k

[@devinosborne3396]

Incredibly clear! Thank you!

[@ARCTutorials]

You're very welcome!

[@mayurpatil2729]

You teach very simple way tnx sir

[@ARCTutorials]

Thanks and welcome

[@Sn-kd2ty]

Sir u r the best

[@MrFuture-96]

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 :)

[@sivachandra3969]

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?

[@ARCTutorials]

Hi Siva. We use observables so that we can get latest data that is emitted or listen to any changes that has happened. I will cover it this topic again in Angular 10 series. Stay tuned for that

[@gouthamm5535]

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

[@ARCTutorials]

Thanks and welcome. Thank you for your support. Do check out the Angular 10 series as well kzbin.info/www/bejne/fJiXpKOIa8iXeLM

[@niharikagurnani]

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

[@parminderkaur8381]

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

[@saicharan6339]

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

[@ARCTutorials]

Hi Sai. Please follow Angular 10 tutorial series as this will be covered again in detail and you can practice with me along. Please check Angular 10 tutorial series for complete learning kzbin.info/www/bejne/pXayYX6wjpacpsk

[@moustafaelkady-1649]

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

[@ARCTutorials]

Thanks for your feedback. I have taken care of audio issues in Angular 10 series. Please check it out, I am sure you will love it!

[@ameebadiyani243]

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

[@shanthib3701]

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.

[@ARCTutorials]

Hi Shanti. For backend if you are focusing on MEAN stack - you should learn Node, Express and of course JavaScript. I have created tutorials for Node and Express. Please check them out

[@shanthib3701]

@@ARCTutorials okay sir! But is it enough? Sir

[@mrinaltewary]

@@shanthib3701 Yup also do mongo db and if u have time learn django,sql

[@shanthib3701]

Okay sir.

[@BlurSentinel]

Python, PHP

[@sunilkumar-zf4dx]

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

[@ARCTutorials]

Hi Sunil. I will cover these in detail in RxJS tutorial series I have started

[@purnimabaranwal]

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?

[@ARCTutorials]

Hi Purnima. Angular team has removed E2E folder as they are not sure of Protractor framework's future

[@mp-fg2zw]

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.

[@ARCTutorials]

Hi mp. Sorry for late reply. Sure. I will cover it as part of hostlistener. I will create some event tutorials. Thanks Sridhar

[@mp-fg2zw]

@@ARCTutorials okay thank you sir.

[@AnujKumar-yp6jh]

Please Make Videos on Angular NgRx

[@codingpsychic4321]

Thanks for the video , you explained very well

[@ARCTutorials]

Glad you liked it

[@jacksm8709]

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

[@ARCTutorials]

We need to use async to wait till we get the data back. This is most common use case in apps. These are called async calls

[@surabhivamshidharrao3143]

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

[@aahlawat904]

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.

[@rkfactsstories]

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

[@ARCTutorials]

Hi Ravi. I have tried to improve audio quality in future videos!

[@rkfactsstories]

@@ARCTutorials thank you sir 👍

[@suyogmoon3099]

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

[@ARCTutorials]

Hi Suyog. In most cases, you would want data to be loaded/displayed on load of the component. That's why most cases we implement a ngoninit

[@dollardreams5811]

Please make a video about promise and observables

[@ARCTutorials]

Sure. You will get it very soon. Thanks Sridhar

[@manyapahuja7050]

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

[@ChandeckTv001]

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

[@jacksm8709]

very practical.....

[@ARCTutorials]

Glad u liked it 👍

[@RizwanKhan-yn9yb]

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

[@hello-test-user]

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

[@123drama2]

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

[@ARCTutorials]

Hi Friend. Can you pls check console log of what error you are seeing and send me screenshot at [e-mail]

[@prashantshinde6850]

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

[@mohammadtrabelsi7567]

Thank you so much sir , you are a great Teacher

[@ARCTutorials]

You are most welcome

[@kuldeepjain7976]

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

[@Dr.Wizard47]

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

[@umaparvathi606]

Scope can u plse explain sir

[@meenalyengul5372]

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

[@ARCTutorials]

Hi Meenal. I have improved the audio quality in Angular 10 series. Please check it out

[@kiranmoulimouli4283]

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

[@ARCTutorials]

I will cover the RxJS methods in separate tutorial as lot of you have asked doubts on it. I will soon create one with clear examples.

[@mayurpatil2729]

Sir hindi main vedio kab aane wali hai

[@ARCTutorials]

Sure Mayur. I will create soon. In the meanwhile please follow along in Angular 10 series, I will soon start a live project kzbin.info/www/bejne/fJiXpKOIa8iXeLM

[@jhonmasco1366]

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?

[@ARCTutorials]

Hi Jhon. The most certain reason will be due tinthe difference in data type of this.order. U need to create a model and then declare this.order of the same data type as is returned in val. Try this fix out!!!

[@jhonmasco1366]

@@ARCTutorials HI, let me explain better. I declare order as any. order: any; in the html i have this: ORDER: {{order}} I work fine, but... if i want to show it in console doesnt work! console.log('VAL: ' + this.order); in you video you put some console.log() but you never show you console to see it ;-) PD: anyway this tutorial help me to solve my problem in my app with asynchronous functions running parallel. THANKS YOU VERY MUCH!

[@vivekrampelly6435]

sir here second subcription is printing multiple times

[@ARCTutorials]

Hi Vivek. Please follow Angular 10 tutorial series as this will be covered again in detail and you can practice with me along. Please check Angular 10 tutorial series for complete learning kzbin.info/www/bejne/pXayYX6wjpacpsk

[@webstack2608]

Plz make a full tutorial for rxjs

[@ARCTutorials]

The series on RXJS is coming after Angular CRUD series. Thanks Sridhar

[@webstack2608]

@@ARCTutorials sir I pratice lot but forgot after some days how to overcome this problem

[@ARCTutorials]

No problem. I will cover it in detail

[@abhilashts2102]

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

[@ARCTutorials]

Hi Abhilash. I am using the default VS code editor and no special extension for Angular as such.

[@abhilashts2102]

@@ARCTutorials i dont get popup help or suggestion whch you got in this video

[@abhilashts2102]

tx , many of my doubt was clarify bcoz of this tutorial

[@ARCTutorials]

You are welcome Abhilash 👍

[@saikumar-eh6df]

How to handle race condition in angular

[@sonalilaware1220]

why we use observer.error

[@ARCTutorials]

Hi Sonali. Please follow along in Angular 10 series. I will cover this in detail kzbin.info/www/bejne/fJiXpKOIa8iXeLM

[@sreenuksr]

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; }); } }

[@ARCTutorials]

I will send you the files I have with me. Please cross check the same. Regards Sridhar

[@adithya6210]

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

[@vasanthapandiyanm2405]

Sir your voice is not audible...

[@ARCTutorials]

Yes Vasantha. In this video i had some issue. Other videos are good quality. Pls follow along. Thanks for your feedbcak. Regards Sridhar

[@saad5527]

Hey, can you please share the notes?

[@vinothhemanth7551]

I think your voice in video is too low

[@mayurpatil2729]

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

[@ARCTutorials]

Hi Mayur. Can you pls start following Angular 10 series. I have recently started the http tutorial. It will surely help you. kzbin.info/www/bejne/i2iUeGZtaqaqbKc

[@MrJPawelHeaven]

Speak louder next time, please ;)

[@ARCTutorials]

Sure Pawel. Thanks for your feedback. Also do check out Angular 10 series kzbin.info/www/bejne/pXayYX6wjpacpsk

[@mayurpatil2729]

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

[@ARCTutorials]

Hi Mayur. Sure Hindi mein bhi jaldi banaunga

[@kamal-ruidas]

error.. can't solve this "

[@ARCTutorials]

Hi Kamal. Can u pls share what is the error u see??

[@adityavedios]

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

[@ramanareddy4303]

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

[@sivagangadharreddykomma5419]

not clear

[@ARCTutorials]

Hi Siva. I am releasing one more video today on Observables, Subscribe and more today as part of Angular 10 series. Please subscribe so you will get notification.

[@jacekbialek409]

spam

[@malleshaadhiveni5740]

How can I contact you

[@ARCTutorials]

Hi Mallesh. Pls send me email at [e-mail]