Angular Tutorial - 21 - Fetch Data Using HTTP

[@Codevolution]

*There is a change in rxjs version 6. Please watch this video to fix that.* kzbin.info/www/bejne/iZTEfHqojJqmZqs

[@FieelFlying]

Awesome, thank you!

[@manishjuniwal7755]

Very nice.....thnx.....do upload more videos

[@ifthikkarudheent1159]

iam using angular7 when i subscribed to observable it is showing error " cant find name 'subscribe' "

[@miradama]

@@ifthikkarudheent1159 Delete the ";" for the line before the .subscribe(data...

[@tolubrand5330]

can you please explain why we are creating an employee inetrface as we know what data is coming from backend and we can directly use it and subscribe it..

[@Saurabh2816]

Jeez, this video could win an Oscar if there was a category for 'Most clear explanation to a complex topic'.

[@rembautimes8808]

Second vote that - I was stumped for several hours on this , opening dozens of Stack Overflow and Angular IO files on how to accomplish this. The nice thing is how the interface was used to map the data. Vishwas does a great job for Angular newbies like myself ( total Angular experience ~ 16 days )* *From Python land , which is awesome but they don’t have material Ui

[@Realswagoverlord]

Agree 110%

[@rshraddha]

These videos deserve more views. I am currently learning angular and your videos are by far the best. You explain step by step in such an easy way that anyone would easily understand the process.

[@BaharBatool]

For angular14 and other issues >> import {Observable} from 'rxjs'; >> in subscribe() define the data type of 'data' FOR EXAMPLE .subscribe((data=any)=>) >> also in employee = [ ] do employee:any instead Overall everything is working completely fine.

[@sn66410]

your Angular series saved me from assignments, love your short and clear videos. Thank you!! ☺

[@babarhussain6557]

hi how are you

[@mirci5459]

Man, I love you! You explained so clear that even I undersrand. I mean, I spent really 9-10 hours to figure out how this schema works and you explained it within 2 videos. Glad you do this content! Even after 5 years from video appeared, it is still helpfull!

[@ДмитрийПавловский-д8э]

Man, thanks so much for your tutorials with detailed explanation! I started learning Angular with your videos.

[@vanzinvestor]

Angular 7 use *import { Observable } from 'rxjs';* instead of import { Observable } from 'rxjs/Observable'

[@venkatsai-]

hello man did u get any solution for this

[@CREED.32]

@@venkatsai- What he has given IS the solution.

[@NoName-vw9hl]

Thank you so much

[@Krazness]

You are a Godsend. I'm loving this series. Thank you!

[@Guinhulol]

Fix for those who are having issues with Observable on Angular 6+ just run the command "npm install rxjs-compat" then you should be good to go

[@c4chachu500]

great video...your clear audio, presentation screen, way of presentation, and words you have used, everything made this tutorial perfect and easy to grasp...

[@jonatasge]

I do not speak and I do not understand English, but I was able to understand and learn a little Angular with your video. Thank you very much.

[@moduthoms]

Very good explanation. Not even Angular official site tutorial explains like this.

[@anandmane3634]

I have been watching you angular videos and I have learned alot. Thanks...

[@babarhussain6557]

your video channel is very helpful for so many members and also very helpful for how are started as a beginner

[@satyamthassu1509]

one of the the likes that you are getting every day on your videos one by one are mine! Good work dude! I Subscribed on just completing your first video.!

[@MZ-uv3sr]

Oh wow that cleared up a lot very quickly. Also thank you for using a good readable font size.

[@hakkihantunbak6340]

What an unbelievably clear explanation. Wow.

[@daviddonadze221]

no one has explained this subject the way u did it. love your videos.

[@rekhamari8736]

Your video nice..i'm fresher so after two time watching your video then only I can understand....tq....

[@fernandogomez83]

Man thank you for this video. You thought me Redux and now you are teaching me Angular. :D

[@lorem349]

For those getting error in the json array file, 1) Replace all the single quotes with double quotes (can be done easily by using ctrl+h in vs code) 2) Remove the comma from the last value of every object in the array

[@Vij2011]

I like your examples, as every video is independent of previous video.

[@merlingrim2843]

FYI - if your import of Observable is failing because you are using version 6 then try this: import { Observable } from 'rxjs';

[@TopsilogYum]

it is going to be automatically imported on VS code, it was puzzling at first but yeah

[@Guinhulol]

For those who are using Angular 6+ just run the command "npm install rxjs-compat" then you should be fine.

[@bawagrafix]

In Angular 6, this is done automatically, great

[@miradama]

Also applied to Angular 7: import { Observable } from 'rxjs';

[@bobbycvsixfour5258]

best described Observable and Subscription ever (starting at 5:20)

[@yunus5949]

Is creation of IEmployee structure unnecessary? putting instead, works

[@Kim-hm4nb]

Hi, Sir, thanx for making tutorials on Angular 6. i learnt a lot of concepts from your tutuorials such as Di, Observables...etc i think your concepts are crystal clear! and also your teaching methodology is so much awesome! i like the way as you teach. Sir i'v a request, kindly make a tutorial on LOGIN AND REGISTRATION SYSTEM in MEAN STACK 6 or at least 5 using mongoose i am waiting your response imran khan from Lahore, Pakistan

[@sillapriyadarshni7255]

error solves: 1. if there is error in subscribe, then check if there is a semicolon in before line. If it's there, remove it. 2.correct to public employees=[] as any; in both employee list and employee detail components 3. remove last semicolon in employee.json 4. correct it to import { Observable } from 'rxjs';

[@AGUNGKAYA]

your explanation is the best. Hope you make more content with Angular's new features also

[@sasikaadesh8184]

Really Really useful. Very well explained. Thanks a million! Please do more video.

[@jt.633]

thank you for this! you're a very good teacher and clear communicator!!

[@purnimabaranwal]

Perfect way to explain. Thanks for putting so much efforts.

[@coltonpekar2675]

when I try the subscribing code, I get an error for the 'employee = []; cant assign type x[] to type never[] can someone help

[@adnankhuwaja1234]

public employee:any[] = []; this will solve your problem

[@bawagrafix]

Thank God till this tutorial I didn't got stuck anywhere, got running everything. Thanks

[@avinashsorab5026]

Best explanation by far. Understood how Observable works under the hood.

[@akshaygupta6321]

Good Job man!!!very good way to explain the concepts in a easy way..Thanks

[@XTheFinalJokerX]

Best explanation ever, veri simple and with examples. Well done, you saved me

[@ponyatnoeit169]

Nice step by step explanation 👍

[@Samuel-np5ng]

I'm trying to do the same but, my employees array is always undefined. The data has the content and it is asigned to my array in the subscribe method because if have checked it. However, when the method its finished I check again my array employees and its empty, as if nothing had happened.

[@HK-sw3vi]

there are rarely any video that I like first then start watching

[@martinez92100]

Amazing explanation of observables

[@galleeandfarel]

awesome explanation, the best in youtube

[@randallp.5578]

This is still such a helpful video.. This helped me understand Observables a bit more, thank you very much! will you post any videos using Angular 14?!

[@VOLTDOGmusic]

I had an issue locating my employees.json file, I had an assets folder within src/app/assets and one within src/assets, I deleted the one in src/app/assets and put the json file in the src/assets folder directly and this got my app to work! Hope this helps anyone!

[@ahmedsalahahmed8387]

I think you should add the file as an asset in the angular.json file

[@harshaeranda3321]

When god think I'm gonna teach anguler service today❤

[@souravnaik6355]

Brilliant explanation . Keep up the good work sir !!

[@oviyathiruvalluvanar7687]

very clear and neat explaination.thankyou so much👌

[@atharvsingh310]

HI viswas Thank you for making such a nice video. i have one confusion please help me. I have already setup Angular project and i have to create so many pages and each page have some static content. so my question is for each pages i need to create new component and for each component i need to create new services? or there is other way to do this. please make one video how to feach data from Database

[@malithsachintha9084]

your explanation is great. This was very useful. Thank you

[@TheMiguel891]

thanks man!! I was finally able to make it work, your explanation is great!

[@luckyv7597]

superb and awsome tutorial. Thanks alot for sharing. now I understood clearly . Great Tutorial

[@ruudhermans4243]

At 4.20 you must end the propertie names for the interface using a semicolon. No clue why it does not give you a warning but it's not a JSON-object.

[@sonumarathe07]

one of the best angular series... Thanks Sir

[@edsalazar4590]

Excellent video series on Angular. I really appreciate the work you have done. Thank you!

[@gangamshow5945]

Great video!! What if i want to show only the people that have the name wich start with A?

[@sourabhdwivedi5418]

Very nice way of explanation

[@billfrost5257]

Really helpful and worked first time on Angular 8.

[@AnkitMishra-mo3dv]

I am using Angular 8 I have written code according to this video. But the detail of Employee list is not showing.

[@KamalSharma-zw3fl]

wow you are perfect, you are a very good teacher

[@williamsbron2686]

the content is great keep going ahead♥♥

[@PakachiWalid]

Man, you just saved my day .. I have been searching for you for a long time !! THNX

[@shubhamtiwari9428]

appreciative work!! crystal clear concept till services thank you

[@ashishchauhan5203]

Hey man please use jsonplaceholder for API tutorials. Hard coded data is a big no no.

[@thisvasilyev]

In general, quite a useful video. But in fact, the result is a memory leak in employee-list.compopent. You can solve this problem by assigning a subscription to a variable. eg this._subcription = this._employeeService.getEmp. And execute this._subcription.unsubscribe() in ngOnDestroy. Or it is better to not subscribe at all. Instead, display data through the async pipe in the template. This is the best practice - because Angular will take care of unsubscribe .

[@brendan2240]

Amazing and simple explanation.

[@absarkhan2288]

you are superb sir, and your all videos are amazing.

[@jmmmmmmmmmk]

Thank you, good job explaining.

[@drorcohen285]

Thank you , You saved my life !!!!

[@mcaldex]

This is really useful. Thank you so much!

[@xinhang5334]

Thank you so much for the explanation! It helps a lot.

[@AshishSingh-op2ul]

The Big one Bro...Completely understandable

[@md.julhashossain9758]

So Cool Man !!!... Just Described On to the point .. Great Work. !!!

[@nikhilvermani9807]

have you explained post meathod also in the same way?

[@efrainespaderocanaviri3265]

Thanks Friends, your are the best, I'm learning so fast. I could understand about services and observables.

[@shivalikakamboj8391]

those who are getting error in importing observables write import { Observable } from 'rxjs'; instead of import { Observable } from 'rxjs/Observable'; .

[@thomaslohmann9361]

Nice tutorial. What about post, put and delete methods? It would be nice if you could make a video about all CRUD operations.

[@章魚-l8y]

Awsome video man, I learnt a lot from your tutorial. May I know why we need to have underscore when naming a private variable? Is it necessary?

[@avanishkumar1689]

from where to get the code of this.............. but thanx for nicely explaining the topic..

[@mainulhasan35]

Thanks a lot! Your series is really useful.

[@baibhavghimire3827]

Watching this and not subscribing will be unfair. :)

[@AhamedKabeer-wn1jb]

Beautifull explanation..

[@hajnel4597]

This is great !! Thank you so much !

[@Gimmiyimmy]

Very well explain.. You clarified my doubts. Thank you so much.

[@chennaiahp5765]

Very good explanation

[@bluepill9131]

I notice on employee-list component you did not define “data” after you subscribed to the observable. Is that because the subscribe method knows that data means the information received from the observable?

[@woodiemarv]

Thought I could help. Yes you are correct. data is just a variable name in the context and could have been anything. ex c1 => class variable = c1

[@romeshfernando2959]

Saved my day thanks

[@chrishinwork1374]

Very cool - do you have lessons on Service Workers? Many thanks

[@branden8028]

This is the best tutorial on the subject. Thank you sir!

[@akhilgusain2866]

Liked it very much. Please continue making such videos.

[@DeepakGupta-s1z]

you helped me a lot. Thanks

[@tomturbo12345]

This is a very good explanation!!

[@Jenson-M-John]

Observed & Subscribed This Channel.

[@nitindelhiful]

at 4.10 instead of commas maybe we should seperate properties in an interface with a semi colon;

[@webtuner]

Newer version edit: To import {Observable} from 'rxjs/observable'; From now-on we can directly use: import {Observable} from 'rxjs';

[@SofianMW]

awesome tutorial thanks much Vishwas

[@moMo-yq3zt]

Omg it works, thank you! I have subscribed!

[@rachnasingh8976]

Please tell me how it works and showing content... Plaese let me know

[@mo_2212]

you are PRO BRO, keep cool and thanks!!

[@aigerimiskakova963]

Thank you for a good explanation. I have an error that observable type is not universal. What can I do with that?

[@kikesitosk8xoxtla]

in this case: have you done two request for the same data in both components?

[@kolos4650]

Thanks man, this helped me. And even more, this made mE to subscribe(); to your channel! *Bdum tsss* :)