Angular 11 Tutorial - Code a Project from Scratch

Learn how to create an Angular 11 project from scratch in this full course. It uses a public API to create a game database website. You will gain a great foundation for building Angular applications.

You will learn how to how to set up a project using Angular CLI, how to create components, how to make http calls, how to implement http interceptors, how to make services.

Also you will learn how to set up routes for your application and how to pass data with routes between the components. You will learn to use pipes and various Angular directives like ngFor, ngIf, and more.

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:01:00) Installation of project and modules
⌨️ (0:04:28) Search bar component
⌨️ (0:06:13) Styling search bar
⌨️ (0:09:36) Creating home component
⌨️ (0:10:03) Creating routes
⌨️ (0:15:08) Styling home component
⌨️ (0:18:58) Creating http service
⌨️ (0:21:23) Creating typescript models
⌨️ (0:23:43) Creating http interceptors
⌨️ (0:28:13) Implementing home component
⌨️ (0:35:13) Implementing sort menu
⌨️ (0:40:28) Creating details component
⌨️ (0:47:13) Styling details component
⌨️ (0:57:43) Details tabs component
⌨️ (1:02:33) Styling tabs
⌨️ (1:04:43) Implementing data into tabs
⌨️ (1:10:38) Final review

--

[CodewithSloba]

Beau thank you for posting my tutorial, I hope it can help all the folks who are trying to get into Angular world. I hope we have more collaboration like this! Enjoy!

[robertoperez]

You're the best, I have been waiting for angular content, thanks!!!

[GagandeepSingh-lzbg]

This is a good course for someone who already knows angular but haven't worked on it for a while and needs a refresher.

[vinay]

Much needed tutorial for brushing up the concepts ! Thanks a lot !

[Renis]

Thank you for taking the time to set this up for us.
There are several things that I would like to point out though.
There are several things that you haven't written in your code and that may leave some developers wondering what is wrong. For example, you haven't imported the environment in the httpService or you haven't added the id field in the Game interface.

When explaining something, saying now I am adding setParameters object to the request, will not make that clearer, a few short sentences should be more than enough.
And so on :)

[carlosdm]

I'm new with angular, in this video you are moving too fast, definetly not a beginers one, I will try to understand all anyway. Thank you for your effort and helping the comunity!

[muthu]

Finally an Angular video!.. Thanks FCC!

[positiveoptimist]

I started with the backend and now I moved to Angular and this is the first tutorial I'll do :D

[nihadkv]

this is amazing😍😍 waiting for more angular projects

[takshpatel]

Thanks for this. just wanted to learn advance angular and here it is.

[PatiparnPojanart]

This vid is perfect for me who had been code angular in the past and stop code them for 4 years....So I'm just wanna relearn them again quickly.

[gustavofalcon]

Thank you very much, I completed the application but using a different web API, so I needed to consume just one endpoint and pass the details games to the detail component via routing data argument

[anuragdhiman]

Your coding skills is above them average... Thankyou for making video...

[procarbine.]

thanks for the tutorial! this and another video really got me through the project for the course im taking

[rishabhjha]

came here looking for something i prolly missed, and boom interceptors, and some other clean stuff.
Thanks!

[mostafizurrahman]

Can you please make a video tutorial on json, wp ajex and wp rest Api?

That would be much helpful.

[adepojuadesewa]

Thanks for this video, but it wasn't really helpful to me as a beginner, but an excellent video for someone who needs to brush up his/her past angular skills.

[bhupendrarathore]

Amazing clear doubts appreciate your efforts

[luthesaint]

Love this! Very helpful concepts to learn.
I don't understand where/how you use <mw1-gauge>. The error I get is that it is not an Angular component but here in your code you just type it is as if it is already. Please explain.

[michrisoft]

Thanks for the tutorial. A couple of things.. Slow down a lot. This speed works for channels like Fireship that cram everything into like 5 minutes, but this is a follow-along tutorial, so that is not good. Also, I would've really like to see more RxJS. I feel like I barely understand what it is useful for in an angular app and why there is so much importance placed on it.