HTTP in Angular - Learning Angular (Part 8)

Learn how to support HTTP requests with this tutorial. We will dive into using fetch to make an HTTP request to a live endpoint, refactor services and service calls to use the new format, add filter capabilities to our app with template variables and typescript.
Resources:
Completed code from this lesson → goo.gle/42j4NjS
Catch the previous episode, Forms in Angular → goo.gle/3LW8YMP
Watch more episodes of Learning Angular→ goo.gle/Learni...
Subscribe to Angular → goo.gle/Angular
#Angular

[@joaomarcos7545]

Finally completed, I can now start my internship task at the company. Thank you guys.

[@ekchills6948]

congrats!

[@true_visual]

Hey guys, in case you paste the objects inside db.json in VSCode and the compiler shouts at you because none of their keys have double quotes, right click to one of the keys and choose the second option, "Format Document", it will put double quotes to every key! Im so happy that I'm learning Angular, thanks for this tutorial Angular team! :))

[@Angular]

great tip!

[@MrFremdes]

I wish I read this comment before manually formatting the doc

[@najmahussaini1423]

Thank you for the tip!!

[@anneyo5627]

That was a good tip, i just asked the chatgpt to do it for me, but this is even better :)

[@teolairla4443]

Thanks! Not formatting ids as strings, returns in Not Found when requesting to json-server at localhost:3000/locations/0 (or any other), so details page is not showing correctly

[@PaulGreen-lk1ym]

Ty from the React enjoyer. Very informative. Would be great to see a similar tutorial for Angular 17.

[@kwame_g]

Loving Angular 17. Following this tutorial and using the new control flow syntax

[@its21yash]

Best angular learning resource ... kudos to Mark

[@raihankabirfahim6029]

Excellent short tutorial

[@isadoradeoliveira886]

Thanks for the tutorial! It has helped a lot 🥰

[@Lopeirada]

Managed to make a filter for state and cityname but cant make the enterkey to be the same has pressing the search button (keydown) doesnt work

[@tuba-inxs]

I couldn't get the city filter to work. What version of angular an node are you on? Thanks!

[@Lopeirada]

@@tuba-inxs latest 18

[@Bastardovl]

For those who are facing problems with the last part, when we use the search button, it filter cities and instantly reflesh the page cleaning the filters, i did an implementation that fixes it: (home.component.ts) at template: Search at filterResults function: filterResults(event: Event, text: string) { event.preventDefault(); (using Angular 16)

[@chamaradissanayake2097]

Thank you so much! I covered all the video series and it is great. One question, why don't you use separate html component? why do it like in React? Is there an advantage?

[@levibidias5997]

i really enjoyed this journey, it was funny and thank you and wish you the best for the next

[@小透明-h9s]

Why not HttpClient?

[@Angular]

HTTP client is a great option in a lot of use cases but since this is targeted towards developers new to Angular we decided to use fetch to keep the amount of new concepts low. Would you like us to make content around HTTPClient? Would that be valuable?

[@magadiflo-dev]

@@Angular yes please, with HTTP Client

[@HaiderAli-hw8sn]

Yes, please make a video to use HttpClient in angular 17 because it is constantly giving me null injector error in angular 17.

[@wbartussek]

Yes please. Especially because this course here seems to promise to focus on HTTP: "HTTP in Angular"

[@lexxguru]

nicely done sir!

[@louiidelosreyes742]

Thank you Mark! :)

[@harithfannad9112]

good job man gg wp thanks for these very nice videos and im looking forwards to more videos

[@gianfrancom8644]

Thank you so much 🔝

[@aguud]

thanks mark

[@atensyidah]

why i got this error ? Error: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package.

[@Lutz64]

You forgot about signals

[@LarsRyeJeppesen]

signals is opt-in

[@Angular]

Signals are still in a developer preview which means that we haven't finished all of the features just yet. We'll be making making more content to cover signals, too. Thanks for checking out this course.

[@peymanebrahimi7756]

What about Feature_module and lazy loading? How to add feature-module in --standalone era?

[@Angular]

You can actually lazy components still with standalone. Check this out: angular.io/guide/standalone-components#lazy-loading-and-default-exports

[@TayambaMwanza]

I managed to finish the playlist. Big thanks to Mark for putting this together in an easy to consume format, I think the less than 15min videos is the perfect duration for quick lessons. I really wish I had access to this when I was first learning Angular. I even learned about javascript features I never used but heard of, will definately use them from now on i.e. non-null assertion, nullish coelecing, optional chaining. Last Feedback: - It would be great to have an "advanced features" section after the "basics" tutorial in the future, it makes a nice divide between, "you are in the basics of angular for a small app" to "here are the more enterprisey features" and I think fetch api CRUD section should be in basics, 99% of apps will need to fetch data from somewhere, httpClient can be in advanced, maybe after a basics in rxjs section (Still part of advanced series) - I noticed that in Angular 16 we use app.config.ts instead of main.ts but I guess that's for next version Otherwise I'd say this is perfect, no major complaints, well done and looking forward to more.

[@ohmegatech666]

This was one of the better tutorials out there. I would love another one covering more topics like other types of binding (two way, class, style), other directives (ngIf, ngClass etc.), template forms (and where to use them instead of reactive forms) and more. A more comprehensive look at Angular's features

[@tharinda97]

If you're not getting the housing location properties on the details page after refactoring the service, update the db.json file with double quotes for the value of "id" properties. ("id": "0")

[@riantix]

That fixed it, thank you!

[@YoYouWildinBro]

Thanks!

[@Bastardovl]

still not working, I think I must sleep

[@Bastardovl]

hmm, ok, update: I was not watching db.json so I,m also having problems to display items at home page, and at details.component.ts I did "this.housingLocation = this.housingLocation;

[@arjunsemwal02]

Thanks bro, Jai Hind

[@RainerHahnekamp]

I really appreciate that you use fetch and point out that the HttpClient is for more complicated cases.

[@Centrifuze]

My search filter isn't working correctly. I type a city name in, and all the results continue to show. Has something changed between then and now? I'm on Angular CLI 18.0.5 and Node 20.15.0

[@tuba-inxs]

I am seeing the same thing. Everything in all the other lessons worked perfectly. But, the last part of the last lesson's (lesson 8's) filter by city. The app ignores the filter and returns all the homes. Angular v16.0.1 and Node v18.15.0

[@Centrifuze]

@@tuba-inxs Thanks to a friend, I found out that pressing the Enter key for the search function would not work, and you had to specifically PRESS the search button with your mouse.

[@Bastardovl]

same here, no matter if i click or press enter

[@Bastardovl]

For those who are facing problems with the last part, when we use the search button, it filter cities and instantly reflesh the page cleaning the filters, i did an implementation that fixes it: (home.component.ts) at template: Search at filterResults function: filterResults(event: Event, text: string) { event.preventDefault(); (using Angular 16)

[@개발채널-n2i]

It’s not a good Signal.. I'm afraid the Angular team will gradually remove RxJS from Angular

[@TayambaMwanza]

Maybe from the core but they will still provide tools for it, see rxjs-interop package in angular

[@AnnaKolb-wt4uq]

The JSON part does not work for me. The website doesn't generate, but the terminal says it's running. The filtering service doesn't work either, even without the json changes. Might be because of package updates. Let me know if someone else had the same problem.

[@tuba-inxs]

same Angular v16.0.1 and Node v18.15.0

[@otavioneto2681]

How could I solve the problem of having to click the search button with the mouse for the filter to work? If we simply press the Enter key, the page reloads as if we hadn't filled out the input.

[@NelsonGiraldo]

Have you solved it?

[@ericsoncadag9519]

@@NelsonGiraldo add $event in filterResults parameter 'filterResults($event, filter.value)' then on the filterResults function 'filterResults($event: Event, text: string)' add $event.preventDefault(); first

[@i-publishinghouseghana432]

The completed code from this lesson is different from the video tutorial.

[@anshulmishra2925]

hey mark , pls add the proper code in the link , the link in this video is not updated with the latest home.component.ts file changes

[@nicobonder]

In minute 4:52, when you refactor the function and remove all the find logic, how does it know that have to go to json and just give you the location you need? It is hard for me to understand how the this.url/id will make to return the same that we had with the find method. Thanks

[@ddnorbertbb]

Thank you for these videos! I hope this series will be continued. Tutorials on udemy or youtube are long and are trying to explain too much on the beginning, and they are not completely up to date... I think it's better to learn basics and read about more advanced topics when it's necessary. It would be great to watch a video about real project structure. I mean how to structure the catalogs with services, UI components, views etc. There's no such video about angular project with standalone components. Videos about Rxjs basics and tests would be really helpful.

[@The00tori00]

I thought that it is standard for Angular to use a specialized service and RxJS

[@arjunsemwal02]

Thanks Mr Mark Thompson and angular team for sharing this tutorial 😊

[@srinik9999]

what about rxjs ???😐

[@TayambaMwanza]

That should go in advanced series

[@noetrevino4511]

at 10:49 he says name instead of city. When searching make sure you search by city and not name

[@yuriim7807]

Is it a good practice to write logic inside a constructor method? I thought the constructor in Angular is used only for dependency injection...😮

[@jhadesdev9576]

I'm very happy to see this in an official tutorial. I have also been using async/await a lot on my applications, and it works great, the code is much more readable than Observables. For most typical HTTP use cases, would you recommend now to use mostly fetch and async/await, and leave the Angular HTTP Client for special use cases, like building an auto-complete? Thank you for sharing.

[@xaviersoh]

"Go build, geats apps!" Amen !!!!

[@omarbousbia6916]

#filter is similar to using jquery selector👌

[@vinosworld6716]

i can`t create touch db.json ...it shows error in path..how to solve this problem

[@marcuscheong]

Run this command first. npm install touch-cli -g

[@michelewhere3694]

after i did all the changes after the min 7:21 and saved everything, when i go to details page of any house, the image of the house doesnt load, and i believe its because when i tranfer it to db.json i had to switch to " instead of ' for the url of the image, is there a way to solve this??or is it something else that may cause the problem?

[@technovelodos]

Check the console for any errors. I had a misplaced ']' at one point that resulted in the same issue.

[@TheEnderCrafte]

dude, check the link to the photo, a hav the same problem, for some reason the link to my images was diferent.

[@nathalie4535]

I also had the problem, and I could not see the housing, but problem was solved that way : 1) I had missed a slash in the url link in the file housing.service.ts the correct link has helped for the first page , to see all the housing together 2) then i had another error in the getHousingLocationById from the same file : instead of the apostroph i needed the grave accent so that the iD can be evaluated ... I muss say that the file in the correction zip are not really reflecting the tutorial at this level, because there is no db.json file and the housing are still hardcoded in the housing.service.ts great tutorial. it was interessant.

[@tharinda97]

Update the db.json file with double quotes for the value of "id" properties. ("id": "0")

[@benchik100]

@@tharinda97 thanks!! It helped 🥳

[@bhupendrasingh8570]

I wanted to take a moment to express my heartfelt appreciation for the incredible content you create on your KZbin channel.Your videos have been a constant source of inspiration and learning for me. I am eagerly awaiting your upcoming video. Your content has become a highlight of my week, and I genuinely look forward to each new release. Your ability to consistently deliver high-quality videos that educate and entertain is truly commendable. You have built a fantastic community around your channel, and I am grateful to be a part of it. Keep up the excellent work, and know that your efforts make a difference in the lives of your viewers. Once again, thank you for your incredible content, and I eagerly await your upcoming video. Keep inspiring and making a positive impact! love from India😊

[@porchheng1320]

thank you so much for your effort sir.

[@ogcontraband]

This is the first one that doesn't work. The user is either starting the json server OR the web server but not both. One trick for anyone stuck here you can open up a new terminal click 'terminal' / 'new terminal' although there's probably better solution this is the only one that worked for me.

[@edlmiranda]

This tutorial is riddled with issues and needs some serious QA.

[@Angular]

Sorry to hear that you've run into so many issues. Could you open a GitHub issues with where you ran into problems so we can update things?

[@jobiej7416]

Is value returned by the getHousingLocationbyID method is it a copy or a reference? If it’s reference does that imply that caller can change the source of truth from the call site or does angular have a way of making it return a copy?

[@mapo890]

prefect

[@pogchamper228]

All done. Great tutorial.

[@djrandomoficial4901]

Thx from Brazil

[@thingsiwishiknew8592]

This was great thanks, really enjoyed it , and it helped clear up some concepts I hadn't quite grasped yet.

[@tharinda97]

Thanks so much for the course! ♥ Create more learning content in the future 🙏

[@diprefranco]

I've found the next a clear way of writing the filter function. filterResults(text: string) { this.filteredLocationList = text ? this.housingLocationList.filter(x => x.name.toLowerCase().includes(text.toLowerCase())) : this.housingLocationList; } Because in both sides of the if statement we need to assign the results to the same variable filteredLocationList. And in my case I'm filtering for the name property of the housing locations.

[@nonenone1857]

Great tutorial! I really like the way you introduce things!

[@charlestietjen5387]

Thanks for the great learning content, this was such a smooth and informative watch from start to finish.

[@i-publishinghouseghana432]

Great job ❤ please keep the videos coming!

[@nonenone1857]

Great tutorial! I really like the way you introduce things!

[@PauloSantos-yu1tn]

When the angular is abble to run 100% without depends on zonejs how http call will be? Will rxjs be removed in the future?

[@jediampm]

hi, zonejs and rxjs are diff things and one dont depend on another. when signals pass to stable zonejs will not be necessary. zonejs is only for sync reactivity. in other hand, rxjs is used in reactive forms, httpclient (provided by Angular) and in some features of the router. rxjs for async reactivity. when zonejs is removed the way to http calls will not change, since you can do by using fetch api (provided by browsers) or by httpclient (provided by Angular).

thanks Mark! Its was gr8 learning with these tutorials

[@TheNicoya77]

Great tutorial

[@Angular]

Thank you for the feedback - what was your favorite part?

[@omarbousbia6916]

Fantastic tutorial 😸 thanks a lot.

[@amirbayat5713]

Hands down, the best tutorial! Concise yet incredibly informative and doable. Hope to see more from you!

[@ahmedrashad494]

which way is faster HttpClient or fetch ?

[@opowiadacz4335]

Thanks for the very helpful tutorial!

[@parsbitex]

Good job

[@hazel-BKJ]

J'ai aimé la demonstration, vraiment elle est super mais comment produire un rendu sur mobile. Merci cordialement

[@Angular]

The app should be responsive so it'll work on mobile with no changes for you. Let us know if this doesn't happen

[@unknownworld9815]

aw rayt way togo!

[@nathanalberg]

observables for http was the worst thing to happen to angular imho

[@mfpears]

For Hello World apps, yes

[@rinaldixxx]

Watched the whole series by curiosity. Amazing content! Cheers from Brazil.

[@banzeirao]

esse curso é muito ruim kkkk

[@aileenchan3741]

For some reason the search and filter is not working for me. I also downloaded the final code and ran the application and it does not work there either. I watched the video twice and followed along and still nothing.🥲

[@faustonunes8423]

I've had the same problem, but was able to overcome it. I had an extra { } in the last arrow function. Make sure you don't have { } in filteredResults' last arrow function! It should be: this.filteredLocationList = this.housingLocationList.filter( housingLocation => housingLocation?.city.toLowerCase().includes(text.toLowerCase()) ); Hope this helps!

[@aileenchan3741]

Thank you