Angular 15 Call Rest API using Get with Params and POST
In this tutorial, we will see how to call a External API from Angular using the HttpClient. We will see :
1. GET Request :
We will call a sample GET API without any parameters and to fetch and typecast the result to display in a table grid.
2. GET Request With Parameters :
Here we will call a sample GET API with parameters using the HttpParams in Angular. Here we will call the API and send the required parameter in the GET request and display the data in the table grid.
3. POST Request :
Finally, we will see the POST method, in which we will POST a object data to a sample POST API and the API will return the result after Posting the data. And finally we will display the result.
And , last but not the least, we will also see how to solve the undefined error of an object by making it Nullable in the HTML , thus solving the error.
#Angular #Angular8 #Angular 10 #Angular 12 #Angular 13 #Angular 15
Пікірлер: 120
better than other youtube Videos. A direct practical explanation is always great for understanding. helpful 100%
This is great tutorial i have ever seen. All videos related to angular8 are awesome. Please keep it up. Very Helpful!!.
This was great! Helped me understand a lot about consuming APIs!
Just what I was looking for and also very nicely explained. Keep up the good work! Thanks!
Thanks a lot for this! I have to describe a REST Api for a project and this helps out a lot!
that works for me!!!! this is what I have been looking for, thanks !!
Oooo Godd.. thanks a lot.. at last you gave me peace... after so many complicated tutorials videos and blogs.. thanks!!!
@TechieOcean
5 жыл бұрын
Thanks Pronay :)
really great and helpful to understand concept of get and post methods .Thank u so much
Awesome video bro..kindly post more videos on nodejs concepts as well..
thanks! great tutorial, helped a lot.
Thank you. This helped me a lot
very helpful and the presentation was clear and chose examples are simple.
Very helpful.... Subscribed... Expecting more tutorials..
This is what I wanted
Thankyou sir! You have the best explanation!
Best solution and explanation for that Console error for accessing the Null object values. Using "?".
Very helpful. Thanks a lot.
Thank you sir, this video solved one of my problems.
Very helpful, ty!
really helpful :)
Lot of thanks brother.😊
Muchas gracias por la información, me ayudó mucho.
Beautiful ^^ THANK YOU VERY MUCH !
Great brother. If you add a little more explanation to your content, it will reach to beginners also.
Thanks.. searching for something like this
Thank you so much :)
VERY HELPFUL! THANK YOU!!! EVERYTHING IS WORKING FINE. BE CAREFUL WITH WRITING - THE WHITE SPACES AND DISTANCE HAVE AN AFFECT ON DISPLAYING YOUR GET AND POST. THANKS AGAIN ;)
@TechieOcean
5 жыл бұрын
Thanks
Thanks from SL
thanks for this..very helpful for me
Great video!
Thank you so much very much useful.
@TechieOcean
5 жыл бұрын
Thanks Mahesh.
very helpful video,thanks sir
helps a lot easy and direct to business
@TechieOcean
5 жыл бұрын
Thanks Zena.
Thanks for the video. I read in other videos that it is better to use interfaces than to use a class. your Class example makes more sense for me. kindly advice
bro thank you..u save my assignment
thank you sir....
thanks, easy to understand
simply awesome tutorial can you please explain javascript parameters and arguments
Good job :)
Thank you.
Great Video Thanks
Thx that helps a lot, one question is that most of the end point website will needs a credentials, (the pop up window if you put end point direct on browsers) Idk how to set in the request so that it can get access to the end point
how should I change the model class if I want to have an array of comments in a single json object?
very good!!!!
+1 nice video, but interesting coding guidelines even for my circumstances :)
@TechieOcean
5 жыл бұрын
Thanks Lukas
Thanks for the clarity and good explanation, i got a dub, the class file is the same as model one???
Is there any way to access only a specific array from a json object in the db.json?example: “contact”: [ { “id”: 1, “list”: { “name”: “anything”, “address”: “anywhere”}, ..contains other key with value..]I only need the “list “.
awesome tutorial
@TechieOcean
5 жыл бұрын
Thanks Nilesh.
Great video. However you hardcoded the userId as '1', could you share more insights into how I can pass the userId gotten from the server as params in order to retrieve the user profile information. Say I click on the user image or username link, I want to hit the end point that will return the public information about that user, How do I pass the username value or userId to this endpoint from angular. Thanks
Thanks a lot
very nice and helpful
How can i use user id throughout the application without storing in local storage(html) after loged in angular 7?is it possible?
Great job
Great
very useful.
Hey this not making any changes to our actual remote json
Thank you
Awesome
Working on 12-3-2021. Thanks
Hi, can you share the code used in this tutorial for easy reference?
thanks bro
@TechieOcean
5 жыл бұрын
Thanks Hammad.
Thanks
thanks we need to code to applay it and how we can get value from textbox in page in event chang i hope do that and put link about it here thanks agin my Brother
in my backend i have user with relaqtionship its one to one relationship so how i bind a data with relationship?
In Post method 'Posts' only refers to a type, but is being used as a value here. getting this error ..please help me
Great tutorial video, how can i get the css code.... thanks in anticipation!!!
Hi, I am getting HttpErrorResponse with statusText: Unknown Error
Nice, but how would a boolean work here? like true or false inputs?
Hi, I am getting error while calling Post api. Status code =0, status text = unknown error, http failure response for 127.0.0.1:5000/ :0 unknown error. Can you help me on this? Thanks in advance
hi binding is not working in my project ... can you help me with that
Can we pass ,byte or stream through http post
Yuo are showing in same page with filterd data..but how can you show in another component
sir could you help me with this .i want to open the comments with the clicking the posts . in the watching of you i have retrieved the data using get method on my component and i have bound it on html but i am unable to do that
@hemantagrahari4298
2 жыл бұрын
Same here
But data is not showing in the front only show data on Console what is my issue in this?
Hi sir What is the perpose commands. Ts Why your created
it shows a disconnected error while getting a posted data..
GET with params is not working for me. Says that headers should come there and not params.
What if there is an XML file instead of JSON??
data not display in the table, on debugging on get method i get this Cannot read property 'get' of undefined
@jithin6manjapra
3 жыл бұрын
same thing here....have you solved it?
i see your video and can create project but using api call get method not showing data in http:localhost:4200. so anything else to write in index.html file to run direct app.component.html ?
@TechieOcean
5 жыл бұрын
Hi Resolute, Kindly checkout the following things: 1) Kindly check whether you have created a Angular 7 seed Project. You can view the Angular version in the package.json file. 2) Check the Console to see whether there is error which is stopping the application to render the app.component properly. 3) Check the node_modules folder. If not present do a npm install in the application path. 4) If things are still not working then install the Latest Angular CLI and Required Nodejs and npm. And then create the project using Angular CLI. Later after creating and running the seed project then go through this video for api call. Also copy paste the GET api in the browser to check whether that API is returning the json result.
beginer here, where do I get the tutorial for the API?
How to get district name along with there details when we pass the state name . sharing API (api.covid19india.org/state_district_wise.json)
Hii, I am getting an error in routeparams
thank you but that's not the best way ,you must promise reslut from api otherwise you can have problem with data sometime .
do you have some unit test (jasmine) examples for this?
@TechieOcean
5 жыл бұрын
I will try to make some video on this.
Can you pls create a video on create, put and delete
@TechieOcean
5 жыл бұрын
Sure Tanmay.. I will try
seems to be a very good tutorial bu i got nothing from the get method in the array if anyone can help :/
could you please share the code
it doesn't allow me lstcomments I down know why.
Hmm I am getting this.myFunction is not a function.
how does com.id works
how to pass multiple parameters
send me delete and put sample rest api code
Hello, great video, congratulation. Can you please let me know how can I do a POST/GET request using an authetication user and password ?
@TechieOcean
5 жыл бұрын
Generally, in Angular or any web technology, there is a Token API or Authentication api which issues a token by passing username and password. Later using that token you can call the other api having authentication. SO i have already created a Video on Token Authentication in Angular. Here we call the Token api by passing the Username and password. And then get the Token and call the other api with that token with Authentication Here is the Link: kzread.info/dash/bejne/k2hnuKyedripd7w.html
Really Great, but I am getting error - Property '_freeApiService' does not exist on type 'AppComponent'
@TechieOcean
4 жыл бұрын
Please make sure you have declared the freeapiservice in the providers section in app.module.ts. Also whether have imported and injected the freeapiservice in app.component.ts properly
this is very usfull for me
not working for me and not able to post
Please need captions available ❤️🙏🙏 please please
Where does 1stcomment came from?
I am getting lot of error