Angular 11 Tutorial – Code a Project from Scratch

Wordpress sites

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 created by Slobodan Gajic. Check out his channel:

๐Ÿ’ป Code:
๐Ÿ”— API details:

โญ๏ธ 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

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

51 thoughts on “Angular 11 Tutorial – Code a Project from Scratch”

  1. Mostafizur Rahman

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

    That would be much helpful.

  2. Code with Sloba

    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!

    1. Thank you for making this tutorial. It cleared up a lot of things for me and your Angular series is one of the best I have watched. Will you going over ‘Observables’ and ‘subscribers’?

      Thank you again.

    2. @Ovuoke Aghwotu Thank you so much for the feedback Iโ€™m glad you liken it.

      Yes Iโ€™m gonna cover it as well

    3. Hvala na ovom tutorijalu Slobodane. Lijepo je vidjeti u moru tutorijala i nekoga sa nasih prostora. Pozdrav!

    4. Code with Sloba

      @Luka Mugosa Hvala na podrsci Luka, ima jos bolji tutorial od mene na ovom kanalu pa slobodno pogledaj.

      ๐Ÿ˜

    1. Code with Sloba

      Youโ€™re welcome โ˜บ๏ธ I hope itโ€™s helpful and you can learn thing or two

    1. Code with Sloba

      Iโ€™m glad you like it ๐Ÿ˜Š You can always look for more on my channel ๐Ÿ™

  3. Juan Carlos Miranda

    First of all Thanks for the video! I would like to know your preferred VS extension to work with Angular? I saw you make a lot of things faster and I would like to know which are snippets or shortcuts, and which are just video edition…. Thank you!!!

    1. Code with Sloba

      Thank you I appreciate the feedback I hope you liked the video. I use angular VS extension for support and emmet.

  4. 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!

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

  6. If this is meant to be a code along situation, copying and pasting at crazy speeds is pointless. I appreciate the content but making it unusable is rough. Just watching a tutorial is rare and not as useful as being able to follow along

    1. Code with Sloba

      Thank you for you feedback, please don’t take it wrong but I tried to be mindfull of people time. I have more tutorials in depth on my channel. I hope I helped at least a bit.

    2. ็ซ็ฝใฎใ‚ขใ‚คใ‚นใ‚ฏใƒชใƒผใƒ 

      Did you know the pause button exists? BS critic.

    3. @็ซ็ฝใฎใ‚ขใ‚คใ‚นใ‚ฏใƒชใƒผใƒ  You seem nice

  7. It is a very helpful video but too fast, also not for beginners. But still thankyou it gives an idea how to use and what to use.

  8. What would be the next steps to make this that much better and help learn more about angular?

    After completing this I am trying to see how I would add to this but it seems my knowledge from this video isn’t enough to take me to that next level of adding things.

    Some things I would like to add to start are:
    pagination or infinite scrolling
    managing state of things like using search and filters doesn’t work properly or returning back to the homepage leaves the search term in search

  9. Gagandeep Singh

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

  10. Thank you so much for the tutorial, you explained really well. It would be nice if you would have explained how to get the tokens or API keys, I’m stuck with one of them, I signed up for the Rapidapi API, I went to end points, and I got under game details the KEY and HOST key. However, in minute 26:47 you are working on the ” http-headers-interceptor” and you explained that you will pass “params” as a key, and then you added a key for “setParams{ key: ….} Where did you find that key? Where can I get it?

    1. hey man, I actually got the key for setParams but I’m struggling to get the x-rapidapi-key for setHeaders, how did u find that?

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

    1. Thank you, btw I think we published much better tutorial right now. Much slower and in details

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

  13. 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 ๐Ÿ™‚

    1. Code with Sloba

      Thank you so much for your valuable feedback. This was one of my first tutorials and it can be improved a lot. Btw more details I have in full course about Angular on my channel.

  14. (in Angular V13.)
    At [22:35]: In the Models.ts class add the slug:string; property to the ParentPlatform interface.
    Otherwise you will get an error when trying to render the gameplatform icons at: [34:00]
    Similar at [38:00] add an id to the Game Interface in models.ts

    1. Giorgi Mtchedlishvili

      @แƒ—แƒแƒ“แƒ”แƒแƒ– แƒฆแƒ•แƒแƒšแƒแƒซแƒ” แƒแƒฅ แƒ แƒ แƒ’แƒ˜แƒœแƒ“แƒ แƒ—แƒแƒ“แƒ”แƒแƒ– ๐Ÿ˜€ <3

    2. แƒ—แƒแƒ“แƒ”แƒแƒ– แƒฆแƒ•แƒแƒšแƒแƒซแƒ”

      แƒœแƒ”แƒขแƒ แƒ แƒ แƒ›แƒ˜แƒœแƒ“แƒ ๐Ÿ˜€

    3. bruh im getting server loading error after implementing home component resources are not loading can u please tellme how to resolve it!!!

  15. I know I can pause the video and look at documentation myself, but for things like setting up the http request service and the api is still murky to me. This is a great app idea but I need something a little more of a walk through with an understanding of why things are being written in a particular way with documentation to back it up.

  16. 20:53:00 he moves so fast you might have missed him adding the base URL to the Environment.ts file

  17. Positive Optimist

    I started with the backend and now I moved to Angular and this is the first tutorial I’ll do ๐Ÿ˜€

Comments are closed.