Angular 9 Tutorial For Beginners #60- Http GET

[@omishan]

Thanks for these high quality tutorials, finally starting to understand all the pieces of angular! Subbed and liked!!

[@ARCTutorials]

Glad u liked the tutorials. Ur words are my motivation 🙏 im right here if u need any help or have any doubts

[@omishan]

@@ARCTutorials Thanks! Im looking for some tutorial on importing a csv file in angular and parsing it to the http post service, any recommendations on what to use for an example?

[@ARCTutorials]

I will check n let you know asap. Thanks Sridhar

[@SURIYA-pp4iu]

you are the best. Keep going. May god bless you

[@ARCTutorials]

Thank you so much for your kind words 🙏🙏

[@jacksm8709]

.... waiting for the next episode... thanks, now I can see the project taking shape... be blessed

[@ARCTutorials]

Hi Jacks. Thanks again for your kind words. I did post one yesterday and will be posting few more today. Thanks Sridhar

[@hiirrroooo]

Hats off! What a great instructor. Thank you so much!

[@ARCTutorials]

Thank you so much buddy!

[@alexvig2369]

Thank you so much, sir! This video saved me in a very critical time. Much appreciated! Couldn't get my subscribing to an observable to work for too much time.

[@ARCTutorials]

Hi Alex. I have covered observable, subscribe in my latest video. Do check to learn about them

[@nandikajeevantha1364]

clear and concise explanations

[@brahmamgoud7818]

What is the use of headers and params,can we pass params in get and post methods

[@ARCTutorials]

Hi Brahmam. I am going to cover that in a day or two in Angular 10 series - stay tuned kzbin.info/www/bejne/pXayYX6wjpacpsk

[@nareshkumar-ug5sw]

Good sir

[@ARCTutorials]

Thanks and welcome

[@kiranpawar2463]

Very very useful video

[@ARCTutorials]

Glad to hear that

[@sonaliwaghmare7076]

Thankyou! Ur teaching is so clear and awesome. Is there any videos on making small application with angular 9 and sql db?

[@ARCTutorials]

Hi Sonali. Soon inwill start end to end project on Angular

[@ankukulhade786]

Video is really nice and clear with all the details. Thanks for sharing the details. How i can get the PPT which you use to show us.

[@somlamsal7464]

good materials. how can I get help from you if I need?

[@ARCTutorials]

Hi Som, You can drop me your queries in comments section here.

[@kingosaur1014]

@ARC_Tutorials I've created a simple registration form i want to store the data using php and MySQL and i have no idea how. some help please

[@sayedimran585]

Hello sir. I am Sayed Imran. I completed my master degree in Statistics from Sri Venkateswara University. From my childhood I am very much interested in Computers. Indeed, I am very passionate in web development. I am good at HTML5, CSS3, JavaScript, TypeScript and familiar with Angular. Can you please help me to get a job as a front end developer. For your kind information, I am a fresher sir. I went through most of your Angular related videos. Thank you sir. Have a nice day.😀

[@vieee778]

You should try making an angular course at Udemy. You're a great instructor!

[@ARCTutorials]

Maybe one day! For now, I am happy sharing my knowledge for free here :) thanks for this great compliment.

[@sridharm2670]

@@ARCTutorials You are great, in this way you tutorial reach more learners

[@nageshbk1]

sir, when I run json server db.json (which I created) is not showing. instead it shows data from www.npmjs.com/package/json-server. I found this data: (To replace this page, create a ./public/index.html file.)

[@nageshbk1]

sir ,Please help me. I am not getting data of my db.json. on starting json server at localhost:3000

[@Manishkumar-pl5kt]

json-server --watch db.json command instead of given command , it resolved my error

[@dhruvraval1543]

Sir exactly how many videos that will be uploaded in this playlist ? Sir please reply big fan sir

[@ARCTutorials]

Hi Dhruv. I have planned around 80 tutorials on Angular 9 full tutorial playlist. Thanks for watching the videos. Thanks Sridhar

[@kalyanchatterjee8624]

I am using *ngFor to iterate through contactList. However, that throws an error in the console saying that *ngFor works with iterables. You mention changing any to array here but don't do it for some reason kzbin.info/www/bejne/hauZq6ien9eAn5Y (13:12) ... that is an array of "contact" objects. This probably requires creating an Interface. I did that but can't figure out how to initialize it in the component. I will figure it out. Thought I should mention it here. These tutorials are very good (truly appreciate you taking the time to create them), just have some loose ends here and there. My comment is invalid if you have touched on this in a future video.

[@manikantajupudi4129]

Thanks..

[@simrankourb1759]

Hi Sridhar, Can you pls tell us how to create mock file? i am waiting for it.

[@ARCTutorials]

Hi Simran. Once ur concepts are clear, I have taught the entire crud functionality in the below playlist. kzbin.info/www/bejne/gYu3pmdmmLxng5I

[@bakrsalem2624]

Waiting for next lesson

[@ARCTutorials]

More videos coming today. Thanks Sridhar

[@TheSupermati97]

Thank you so much. It's easy to understand.

[@ARCTutorials]

Glad you liked it 👍

[@pramodcm3202]

sir, can u make a tutorial for c# Asp.net core API and MVC series... it will be a great help.

[@ARCTutorials]

Sure Pramod. Will try it

[@sreenuksr]

Sridhar, I am getting this error - NgFor only supports binding to Iterables such as Arrays . However I am seeing the result on screen. Let me know fix. when I put _products.data in template then i m not getting error in console but data is not displaying. let me know fix

[@ARCTutorials]

You will see this error when you have assigned the data type as "Products" i.e that type of Observable you have mapped. Thats the root cause. Please assign the variable to the same data type and it will be fixed.

[@sreenuksr]

@@ARCTutorials i declared products data type as - any. but still issue same

[@ARCTutorials]

Any wont work. U need to provide the product type as it will thing any is array. It has to same observable data type you are subscribing

[@sreenuksr]

@@ARCTutorials Could you please share me the code - [e-mail]

[@keshavsharma902]

I can only run one thing at a time. It's either server to get contacts with URL localhost:3000/contacts or app with URL localHost:4200/contacts

[@ARCTutorials]

You need to run these 2 from 2 different terminals. It will work fine. Please try it out!!!

[@keshavsharma902]

@@ARCTutorials Thanks for the reply. IT WORKED :)

[@sonnysonny66]

New subscriber here. I been following but having problem in chrome with Access to XMLHttpRequest at 'localhost:3000/contacts' from origin 'localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. Can you please help me with this? thanks

[@ARCTutorials]

Hi Sonny. R u admin on your machine?? We may need to check ur rights on setting chome permissions. Can u pls send screenshot at [e-mail]

[@sonnysonny66]

@@ARCTutorials I sent you screenshots sir thru your given email. Hope you can help me solved this. Thank you

[@shubhamarya1306]

Hi sonny... you have to make a proxy conf file and have to route your calls via that proxy.. just search your doubt on google and you will get a lot of search results for the same

[@omarraafat1200]

Thank You So much from Egypt ... for your time and effort, this course helps me a lot in my work

[@ARCTutorials]

Happy to hear that!

[@bhanukumarbhoompally1697]

sir currently am using angular 13 am getting error while subscribing as """ Property 'subscribe' does not exist on type 'void' """" can u pls help me.

[@shubhamarya1306]

Why didn't you face CORS issue ?

[@ARCTutorials]

Hi Shubham. That's coz I had in my local API. If you are accessing any outside APIs, we will surely run into CORS issue

[@shubhamarya1306]

@@ARCTutorials No...your angular app was running on another port and your backend API was running on another port so doesn't matter if you have same localhost, if the ports are different you are bound to get CORS issue. As you didn't have any proxy enabled right? Or am I missing something. Please explain

[@ARCTutorials]

Wrong. Port doesnt matter. The origin is same in my case i.e localhost. Hence no cors error for me. Cors will come when different origins and are not open APIs. Hope this helps

[@shubhamarya1306]

@@ARCTutorials sorry, you are wrong here, even different ports lead to CORS issue coz according to the system you are different hosts.

[@crzle3205]

Sir how can I run localhost 3000 and localhost 4200 in one terminal because once I start local4200 so localhost3000 is disconnected and data is not display

[@ARCTutorials]

You need to run the two in two different terminals. A sample application demo of setup I have shown in this video, please check and let me know if you need more help kzbin.info/www/bejne/iJnNlmmCrc50otE

[@crzle3205]

@@ARCTutorials Thank You sir please continue your teaching after seen your video I deeply understand the topics. Thank you

[@ARCTutorials]

@@crzle3205 Thanks Anurag for your kind words of encouragement. Regards Sridhar

[@greentime338]

there is no button click in video , so how create get request when the button clicked

[@kiranpawar2463]

Thanks🙏

[@ARCTutorials]

You’re welcome 😊

[@hashirahmed8085]

Sir i am trying send data between sibling components i.e. i want to send username from login component to navbar component so that i can display it there. Sir can this be done, Sir Please help I am stuck.

[@jamesexport4154]

sir can we get your ppt. It would be really helpful! Thanks

[@ARCTutorials]

Hi Buddy. Sure. Drop me a note at [e-mail] and I will share the notes

[@jamesexport4154]

@@ARCTutorials sure

[@jamesexport4154]

@@ARCTutorials please check your mail sir

[@ravipal1455]

Not able to import HttpCLientModule

[@subramanyamchapala7362]

This is my 2nd youtube account to subscribe my favorate Tutorial channel. Thank you Sridhar sir

[@ARCTutorials]

Thanks mate for your constant support and encouragement 👍

[@amanuellebassi7294]

You are an amazing teacher. You have made me concentrate in this class during this Covid19 downtime. I am learning a lot and will follow you all the way!

[@ARCTutorials]

Thank you so much buddy. Im glad you are finding tutorials useful 👍

[@amanuellebassi7294]

@@ARCTutorials So much my dear. Can you send me your email address?

[@ARCTutorials]

[e-mail]

[@tigerlily-1]

Hi ARC tutorials, I would like to thank you first of all for posting amazing tutorials which are really helpful to understand the basics . I have a question in get method api using asp.net core . In asp.net core im using localhost:2322 So I have a query in angular using url in get method as localhost... so this makes a different at both the ends using above url. As i cannot able to retreive list of data through get method. Can you please help me ? I want to display list of data using angular http get method. So what should i do.

[@ARCTutorials]

Hi Darshana. Thank you for your kind words and encouragement. I am sharing with source code of angular http CRUD operations we have done in other series. It will help you for your reference. Below is the link of how to setup and run the project locally kzbin.info/www/bejne/iJnNlmmCrc50otE

[@tigerlily-1]

@@ARCTutorials Thank you for quick response.

[@chiragsolanki2215]

share your notes.

[@ARCTutorials]

Hi Chirag. Please drop me a note at [e-mail]

[@kiranpawar2463]

It's work

[@ARCTutorials]

Cheers buddy!

[@sreenuksr]

Angular 9 Tutorial For Beginners #60- Http GET - get('end-piont'); - get('url', options:{params{},headers{}}) - the response type will be observable - whenever the response is observable then we need to subscribe in order to read the values - Headers: is of type HttpHeader - Params: is of type HttpParam Steps to implement: - 1. Import HttpClientModule in app.module - 2. Import HttpClient in our service or component wherever we are making the HTTP request - 3. Inject the HTTPClient in the constructor method of the class - 4. Implement the GET method call - 5. Import the services into required calling component class - 6. Call the method to make HTTP GET request app.module.ts import{HttpClientModule} from '@angular/common/http'; @NgModule({ declarations: [ContactsComponent] imports: [HttpClientModule] service.ts import { Injectable } from '@angular/core'; import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http'; export class ContactsService { constructor(private httpClient: HttpClient) { } getProducts() { return this.httpClient.get('localhost:3000/products'); } component.ts import { Component, OnInit } from '@angular/core'; import { ContactsService } from '../contacts.service'; @Component({ selector: 'app-contacts', templateUrl: './contacts.component.html', styleUrls: ['./contacts.component.scss'] }) export class ContactsComponent implements OnInit { _products: any; constructor(public contactservice: ContactsService) { } ngOnInit(): void { this._products = this.contactservice.getProducts().subscribe(data => { this._products = data; }) } } component.html List Of Products {{product.id}} - {{product.name}}

[@ARCTutorials]

Thanks Sreeni. Regards Sridhar

[@konstantinsurnin855]

.pipe(tap) устарел, вместо него юзайте subscribe(data=> data)

[@Shubham-ph2ww]

Sir I'm not able to be at same learning pace as the company training is going, Angular is completed in 1 week still I'm unable to get Next week is tollgate test Would You tell me best strategy to learn building an angular app?