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.
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.😀
@@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?
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.)
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}}
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
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.
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.
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
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 th-cam.com/video/Rhje6LxiAlo/w-d-xo.html
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
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 soorya.aaradhya@gmail.com
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
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 th-cam.com/video/Oz6zuhjrMi4/w-d-xo.html (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.
@@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
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
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.
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 th-cam.com/video/Rhje6LxiAlo/w-d-xo.html
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!
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?
![ปฏิเสธไม่ไหว (Crush on you) - LIPTA feat. No One Else [Official MV]](http://i.ytimg.com/vi/NBw1jF342vw/mqdefault.jpg)
you are the best.
Keep going.
May god bless you
Thank you so much for your kind words 🙏🙏
Good sir
Thanks and welcome
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.
Hi Alex. I have covered observable, subscribe in my latest video. Do check to learn about them
clear and concise explanations
.... waiting for the next episode... thanks, now I can see the project taking shape... be blessed
Hi Jacks. Thanks again for your kind words. I did post one yesterday and will be posting few more today. Thanks Sridhar
Hats off! What a great instructor. Thank you so much!
Thank you so much buddy!
Very very useful video
Glad to hear that
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.😀
Thanks for these high quality tutorials, finally starting to understand all the pieces of angular! Subbed and liked!!
Glad u liked the tutorials. Ur words are my motivation 🙏 im right here if u need any help or have any doubts
@@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?
I will check n let you know asap. Thanks Sridhar
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
You need to run these 2 from 2 different terminals. It will work fine. Please try it out!!!
@@ARCTutorials Thanks for the reply. IT WORKED :)
What is the use of headers and params,can we pass params in get and post methods
Hi Brahmam. I am going to cover that in a day or two in Angular 10 series - stay tuned th-cam.com/video/oEO0KzY1ipg/w-d-xo.html
You should try making an angular course at Udemy. You're a great instructor!
Maybe one day! For now, I am happy sharing my knowledge for free here :) thanks for this great compliment.
@@ARCTutorials You are great, in this way you tutorial reach more learners
Thanks..
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.
Waiting for next lesson
More videos coming today. Thanks Sridhar
Thank you so much. It's easy to understand.
Glad you liked it 👍
Thankyou! Ur teaching is so clear and awesome. Is there any videos on making small application with angular 9 and sql db?
Hi Sonali. Soon inwill start end to end project on Angular
@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
Thank You So much from Egypt ...
for your time and effort, this course helps me a lot in my work
Happy to hear that!
there is no button click in video , so how create get request when the button clicked
This is my 2nd youtube account to subscribe my favorate Tutorial channel. Thank you Sridhar sir
Thanks mate for your constant support and encouragement 👍
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.
Hi Sridhar,
Can you pls tell us how to create mock file?
i am waiting for it.
Hi Simran. Once ur concepts are clear, I have taught the entire crud functionality in the below playlist. th-cam.com/video/KZTu40cW4M0/w-d-xo.html
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.)
sir ,Please help me. I am not getting data of my db.json. on starting json server at localhost:3000
json-server --watch db.json command instead of given command , it resolved my error
Thanks🙏
You’re welcome 😊
good materials. how can I get help from you if I need?
Hi Som, You can drop me your queries in comments section here.
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}}
Thanks Sreeni. Regards Sridhar
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
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.
@@ARCTutorials i declared products data type as - any. but still issue same
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
@@ARCTutorials Could you please share me the code - sreenuksr@gmail.com
sir, can u make a tutorial for c# Asp.net core API and MVC series...
it will be a great help.
Sure Pramod. Will try it
Sir exactly how many videos that will be uploaded in this playlist ? Sir please reply big fan sir
Hi Dhruv. I have planned around 80 tutorials on Angular 9 full tutorial playlist. Thanks for watching the videos. Thanks Sridhar
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.
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
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
th-cam.com/video/Rhje6LxiAlo/w-d-xo.html
@@ARCTutorials Thank You sir please continue your teaching after seen your video I deeply understand the topics. Thank you
@@crzle3205 Thanks Anurag for your kind words of encouragement. Regards Sridhar
Not able to import HttpCLientModule
sir can we get your ppt. It would be really helpful! Thanks
Hi Buddy. Sure. Drop me a note at soorya.aaradhya@gmail.com and I will share the notes
@@ARCTutorials sure
@@ARCTutorials please check your mail sir
It's work
Cheers buddy!
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
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 soorya.aaradhya@gmail.com
@@ARCTutorials I sent you screenshots sir thru your given email. Hope you can help me solved this. Thank you
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
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 th-cam.com/video/Oz6zuhjrMi4/w-d-xo.html (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.
Why didn't you face CORS issue ?
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
@@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
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
@@ARCTutorials sorry, you are wrong here, even different ports lead to CORS issue coz according to the system you are different hosts.
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.
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 th-cam.com/video/Rhje6LxiAlo/w-d-xo.html
@@ARCTutorials Thank you for quick response.
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!
Thank you so much buddy. Im glad you are finding tutorials useful 👍
@@ARCTutorials So much my dear. Can you send me your email address?
Soorya.aaradhya@gmail.com
share your notes.
Hi Chirag. Please drop me a note at soorya.aaradhya@gmail.com
.pipe(tap) устарел, вместо него юзайте subscribe(data=> data)
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?