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

  • @vaibhavmore1051
    @vaibhavmore10514 жыл бұрын

    better than other youtube Videos. A direct practical explanation is always great for understanding. helpful 100%

  • @dbharat533
    @dbharat5334 жыл бұрын

    This is great tutorial i have ever seen. All videos related to angular8 are awesome. Please keep it up. Very Helpful!!.

  • @MrTrevorsaurusrex
    @MrTrevorsaurusrex4 жыл бұрын

    This was great! Helped me understand a lot about consuming APIs!

  • @SajanDhakal
    @SajanDhakal4 жыл бұрын

    Just what I was looking for and also very nicely explained. Keep up the good work! Thanks!

  • @coffeelord906
    @coffeelord9064 жыл бұрын

    Thanks a lot for this! I have to describe a REST Api for a project and this helps out a lot!

  • @andresborbon404
    @andresborbon4044 жыл бұрын

    that works for me!!!! this is what I have been looking for, thanks !!

  • @pronayfly
    @pronayfly5 жыл бұрын

    Oooo Godd.. thanks a lot.. at last you gave me peace... after so many complicated tutorials videos and blogs.. thanks!!!

  • @TechieOcean

    @TechieOcean

    5 жыл бұрын

    Thanks Pronay :)

  • @milindmehkarkar6759
    @milindmehkarkar67594 жыл бұрын

    really great and helpful to understand concept of get and post methods .Thank u so much

  • @mohankumar-yx5ep
    @mohankumar-yx5ep5 жыл бұрын

    Awesome video bro..kindly post more videos on nodejs concepts as well..

  • @shadowelf994
    @shadowelf9945 жыл бұрын

    thanks! great tutorial, helped a lot.

  • @sphiwemodise5713
    @sphiwemodise57135 жыл бұрын

    Thank you. This helped me a lot

  • @vayuagni
    @vayuagni4 жыл бұрын

    very helpful and the presentation was clear and chose examples are simple.

  • @sheffywins3562
    @sheffywins35624 жыл бұрын

    Very helpful.... Subscribed... Expecting more tutorials..

  • @pratikchougule9394
    @pratikchougule93944 жыл бұрын

    This is what I wanted

  • @watsaj8962
    @watsaj89624 жыл бұрын

    Thankyou sir! You have the best explanation!

  • @chaynnittagarwal3215
    @chaynnittagarwal32153 жыл бұрын

    Best solution and explanation for that Console error for accessing the Null object values. Using "?".

  • @superlistCG
    @superlistCG4 жыл бұрын

    Very helpful. Thanks a lot.

  • @emreinanli
    @emreinanli4 жыл бұрын

    Thank you sir, this video solved one of my problems.

  • @gyromite
    @gyromite3 жыл бұрын

    Very helpful, ty!

  • @lindasebastian9227
    @lindasebastian92275 жыл бұрын

    really helpful :)

  • @raghavendradeshmukh2060
    @raghavendradeshmukh20604 жыл бұрын

    Lot of thanks brother.😊

  • @renzo4898
    @renzo48984 жыл бұрын

    Muchas gracias por la información, me ayudó mucho.

  • @jlonso1840
    @jlonso1840 Жыл бұрын

    Beautiful ^^ THANK YOU VERY MUCH !

  • @konadeepak9443
    @konadeepak94434 жыл бұрын

    Great brother. If you add a little more explanation to your content, it will reach to beginners also.

  • @mkhembrom13
    @mkhembrom134 жыл бұрын

    Thanks.. searching for something like this

  • @jithin6manjapra
    @jithin6manjapra3 жыл бұрын

    Thank you so much :)

  • @RaceDriverF1
    @RaceDriverF15 жыл бұрын

    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

    @TechieOcean

    5 жыл бұрын

    Thanks

  • @LokkasVLOG
    @LokkasVLOG4 жыл бұрын

    Thanks from SL

  • @yashlodhari1689
    @yashlodhari16894 жыл бұрын

    thanks for this..very helpful for me

  • @seiftahawy54
    @seiftahawy544 жыл бұрын

    Great video!

  • @kvk1306
    @kvk13065 жыл бұрын

    Thank you so much very much useful.

  • @TechieOcean

    @TechieOcean

    5 жыл бұрын

    Thanks Mahesh.

  • @aishwariyajagtap2798
    @aishwariyajagtap27984 жыл бұрын

    very helpful video,thanks sir

  • @zenateweld260
    @zenateweld2605 жыл бұрын

    helps a lot easy and direct to business

  • @TechieOcean

    @TechieOcean

    5 жыл бұрын

    Thanks Zena.

  • @Vuyiswamb
    @Vuyiswamb Жыл бұрын

    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

  • @jeffreytham3301
    @jeffreytham33012 жыл бұрын

    bro thank you..u save my assignment

  • @rajeevbhosle1580
    @rajeevbhosle15804 жыл бұрын

    thank you sir....

  • @lijie6170
    @lijie61702 жыл бұрын

    thanks, easy to understand

  • @jsblockchain381
    @jsblockchain3815 жыл бұрын

    simply awesome tutorial can you please explain javascript parameters and arguments

  • @ebichu8126
    @ebichu81265 жыл бұрын

    Good job :)

  • @freud6343
    @freud63434 жыл бұрын

    Thank you.

  • @ferdibabazade8264
    @ferdibabazade82643 жыл бұрын

    Great Video Thanks

  • @saneran6829
    @saneran68292 жыл бұрын

    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

  • @Massivegamer123
    @Massivegamer1235 жыл бұрын

    how should I change the model class if I want to have an array of comments in a single json object?

  • @yoanxristow9323
    @yoanxristow93233 жыл бұрын

    very good!!!!

  • @lukas7966
    @lukas79665 жыл бұрын

    +1 nice video, but interesting coding guidelines even for my circumstances :)

  • @TechieOcean

    @TechieOcean

    5 жыл бұрын

    Thanks Lukas

  • @Tsukasa1929
    @Tsukasa19294 жыл бұрын

    Thanks for the clarity and good explanation, i got a dub, the class file is the same as model one???

  • @abdullahjonaed4979
    @abdullahjonaed49794 жыл бұрын

    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 “.

  • @NileshKardate
    @NileshKardate5 жыл бұрын

    awesome tutorial

  • @TechieOcean

    @TechieOcean

    5 жыл бұрын

    Thanks Nilesh.

  • @sunday6142
    @sunday61423 жыл бұрын

    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

  • @ousamaelidrissi5886
    @ousamaelidrissi58864 жыл бұрын

    Thanks a lot

  • @shubhangimote4358
    @shubhangimote43582 жыл бұрын

    very nice and helpful

  • @sheffywins3562
    @sheffywins35624 жыл бұрын

    How can i use user id throughout the application without storing in local storage(html) after loged in angular 7?is it possible?

  • @dhavalvaghela1112
    @dhavalvaghela11122 жыл бұрын

    Great job

  • @sureshbhise9491
    @sureshbhise94915 жыл бұрын

    Great

  • @syedazamali8861
    @syedazamali88613 жыл бұрын

    very useful.

  • @Tanzeel431
    @Tanzeel4315 жыл бұрын

    Hey this not making any changes to our actual remote json

  • @newybocktor
    @newybocktor3 жыл бұрын

    Thank you

  • @janithasampathbandara8554
    @janithasampathbandara85544 жыл бұрын

    Awesome

  • @arjuns8072
    @arjuns80723 жыл бұрын

    Working on 12-3-2021. Thanks

  • @tangdaniel3434
    @tangdaniel34343 жыл бұрын

    Hi, can you share the code used in this tutorial for easy reference?

  • @HammadAli-bf6vl
    @HammadAli-bf6vl5 жыл бұрын

    thanks bro

  • @TechieOcean

    @TechieOcean

    5 жыл бұрын

    Thanks Hammad.

  • @reshmaugale1339
    @reshmaugale13393 жыл бұрын

    Thanks

  • @openmindjustdoit1306
    @openmindjustdoit13064 жыл бұрын

    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

  • @tauseefalzohar7898
    @tauseefalzohar7898 Жыл бұрын

    in my backend i have user with relaqtionship its one to one relationship so how i bind a data with relationship?

  • @chitraarumugam9529
    @chitraarumugam95293 жыл бұрын

    In Post method 'Posts' only refers to a type, but is being used as a value here. getting this error ..please help me

  • @ebukapeter7106
    @ebukapeter71064 жыл бұрын

    Great tutorial video, how can i get the css code.... thanks in anticipation!!!

  • @yeshubularaha288
    @yeshubularaha2884 жыл бұрын

    Hi, I am getting HttpErrorResponse with statusText: Unknown Error

  • @parallax7789
    @parallax77892 жыл бұрын

    Nice, but how would a boolean work here? like true or false inputs?

  • @saloninagaria1317
    @saloninagaria13174 жыл бұрын

    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

  • @ekatadey6065
    @ekatadey60654 жыл бұрын

    hi binding is not working in my project ... can you help me with that

  • @mr.triplea3021
    @mr.triplea30214 жыл бұрын

    Can we pass ,byte or stream through http post

  • @eversathish
    @eversathish2 жыл бұрын

    Yuo are showing in same page with filterd data..but how can you show in another component

  • @trickysoft6547
    @trickysoft65474 жыл бұрын

    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

    @hemantagrahari4298

    2 жыл бұрын

    Same here

  • @hemantagrahari4298
    @hemantagrahari42982 жыл бұрын

    But data is not showing in the front only show data on Console what is my issue in this?

  • @subashsuruliram2009
    @subashsuruliram20093 жыл бұрын

    Hi sir What is the perpose commands. Ts Why your created

  • @santhoshkumar7888
    @santhoshkumar78884 жыл бұрын

    it shows a disconnected error while getting a posted data..

  • @nrusinhaprasadt9565
    @nrusinhaprasadt95654 жыл бұрын

    GET with params is not working for me. Says that headers should come there and not params.

  • @parminderkaur6742
    @parminderkaur67423 жыл бұрын

    What if there is an XML file instead of JSON??

  • @himanshuverma-ec1yn
    @himanshuverma-ec1yn5 жыл бұрын

    data not display in the table, on debugging on get method i get this Cannot read property 'get' of undefined

  • @jithin6manjapra

    @jithin6manjapra

    3 жыл бұрын

    same thing here....have you solved it?

  • @resoluteresolute1056
    @resoluteresolute10565 жыл бұрын

    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

    @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.

  • @mincosinet8612
    @mincosinet86122 жыл бұрын

    beginer here, where do I get the tutorial for the API?

  • @vibhashpandit8833
    @vibhashpandit88334 жыл бұрын

    How to get district name along with there details when we pass the state name . sharing API (api.covid19india.org/state_district_wise.json)

  • @nehagarg3955
    @nehagarg39553 жыл бұрын

    Hii, I am getting an error in routeparams

  • @mamadoudiouf7638
    @mamadoudiouf76383 жыл бұрын

    thank you but that's not the best way ,you must promise reslut from api otherwise you can have problem with data sometime .

  • @zainabimamdin732
    @zainabimamdin7325 жыл бұрын

    do you have some unit test (jasmine) examples for this?

  • @TechieOcean

    @TechieOcean

    5 жыл бұрын

    I will try to make some video on this.

  • @TanmayKamath
    @TanmayKamath5 жыл бұрын

    Can you pls create a video on create, put and delete

  • @TechieOcean

    @TechieOcean

    5 жыл бұрын

    Sure Tanmay.. I will try

  • @yahyabeysami101
    @yahyabeysami1012 жыл бұрын

    seems to be a very good tutorial bu i got nothing from the get method in the array if anyone can help :/

  • @rsilva2014
    @rsilva20144 жыл бұрын

    could you please share the code

  • @TADDEXIO
    @TADDEXIO2 жыл бұрын

    it doesn't allow me lstcomments I down know why.

  • @owntor1
    @owntor14 жыл бұрын

    Hmm I am getting this.myFunction is not a function.

  • @kiranappu952
    @kiranappu9524 жыл бұрын

    how does com.id works

  • @sandeepkumar-cz6qb
    @sandeepkumar-cz6qb4 жыл бұрын

    how to pass multiple parameters

  • @subhashnaik1809
    @subhashnaik18095 жыл бұрын

    send me delete and put sample rest api code

  • @dulaozinho
    @dulaozinho5 жыл бұрын

    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

    @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

  • @Beautifulcomments
    @Beautifulcomments5 жыл бұрын

    Really Great, but I am getting error - Property '_freeApiService' does not exist on type 'AppComponent'

  • @TechieOcean

    @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

  • @tarunchanderbhatt
    @tarunchanderbhatt4 жыл бұрын

    this is very usfull for me

  • @santhoshkumar7888
    @santhoshkumar78884 жыл бұрын

    not working for me and not able to post

  • @kailarathod2752
    @kailarathod27522 жыл бұрын

    Please need captions available ❤️🙏🙏 please please

  • @johnphilippar5413
    @johnphilippar54134 жыл бұрын

    Where does 1stcomment came from?

  • @alwinsebastian7499
    @alwinsebastian74993 жыл бұрын

    I am getting lot of error