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 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:
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!
@Tirthesh Pawar did u get the answer for setparams if so plz let me know
@Luka Mugosa Hvala na podrsci Luka, ima jos bolji tutorial od mene na ovom kanalu pa slobodno pogledaj.
?
Hvala na ovom tutorijalu Slobodane. Lijepo je vidjeti u moru tutorijala i nekoga sa nasih prostora. Pozdrav!
@Ovuoke Aghwotu Thank you so much for the feedback I’m glad you liken it.
Yes I’m gonna cover it as well
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.
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 🙂
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.
Much needed tutorial for brushing up the concepts ! Thanks a lot !
You’re welcome ☺️ I hope it’s helpful and you can learn thing or two
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.
20:53:00 he moves so fast you might have missed him adding the base URL to the Environment.ts file
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
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?
@Andy Addyx drop the link for Setparams please
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?
did you find from where they took params key?
?
Hi, did anyone figure out how to get the key yet for setParams??
I started with the backend and now I moved to Angular and this is the first tutorial I’ll do 😀
Can you please make a video tutorial on json, wp ajex and wp rest Api?
That would be much helpful.
this is amazing?? waiting for more angular projects
I’m glad you like it ? You can always look for more on my channel ?
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!!!
Thank you I appreciate the feedback I hope you liked the video. I use angular VS extension for support and emmet.
This is a good course for someone who already knows angular but haven’t worked on it for a while and needs a refresher.
I’m glad you liked it! You can check more detailed tutorials on my channel.
This is amazing. Thank you ❤️?
great video, thanks! Next time, if you could lower the volume of the background music it would be even better 🙂
Thank you, yeah I think newer tutorials are better. Feel free to check my channel
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.
Thank you, btw I think we published much better tutorial right now. Much slower and in details
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!
@Code with Sloba
H
@Raj Gupta haha interesting idea
Simply run the video at .75 speed. It’s weird but its slightly better
@Code with Sloba your channel reference?
(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
Thanks!
@თადეოზ ღვალაძე აქ რა გინდა თადეოზ 😀 <3
bruh im getting server loading error after implementing home component resources are not loading can u please tellme how to resolve it!!!
ნეტა რა მინდა 😀
Thanks man
Great tutorial ?? Thanks.
I’m glad you like it! More tutorials like this are comming ?
thanks for the tutorial! this and another video really got me through the project for the course im taking
I’m super glad for that. For more tutorials feel free to check my channel
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
@火災のアイスクリーム You seem nice
Did you know the pause button exists? BS critic.
exactly
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.
I’m with you on this @stoneowl