Build Your First ANGULAR Web app ~ Beginner Angular Todo app
Learn how to build an Angular 11 web application. This tutorial is for beginners and upward! Learn how to create an Angular todo app using generated components, ngModel, ngFor and many other directives!
// CODE
Github:
// BECOME A MEMBER!!!
// FOLLOW ME ON TWITTER
// MY GEAR FOR CODING AND YOUTUBE
Blue Yeti Microphone:
Microphone Stand:
Chair:
Thunderbolt Dock:
Monitor:
All of these products I own and have tested!
// INTERESTED IN GAME DEV?
Game development channel:
// CHECK OUT MY GAME
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE
Tyler- Just started learning Angular/TS for a new job, and you are a natural teacher. Keep it up man because you by far had the best tutorial and I’ve seen a lot. You keep it simple- I had one issue with not inferring type- which was answered in the comments below. Other than that, this is a 5/5 tutorial hands down. Thanks a lot!
Big thanks! As someone who has recently started teaching the basics of code, I have to say this video is refreshing. I am junior dev coming from the React world. Just thought I would give Angular a glance. Of course, it might be turn out to be more than a glance! I already jive with the Angular layout. Great tutorial!
Do you still study angular? I’m starting to learn but its a lot of information all at once
Best tutorial ever so far! However, I’m having three errors that keep occurring regardless of what tutorial I follow:
1. Property ‘todos’ has no initializer and is not definitely assigned in the constructor. ts(2564) [11,3]
2. Property ‘content’ has no initializer and is not definitely assigned in the constructor. ts(2564) [2,5]
3. Property ‘completed’ has no initializer and is not definitely assigned in the constructor. ts(2564) [3,5]
4. *ngFor isn’t auto-populating like it appears to be in your codebase for me and appears to not register as anything??
Any help would be appreciated as I have no idea why I’m getting this error!
Hey guys, change your Todo class to todo Interface by replacing “class” word for the “interface” word (so you will have “export interface Todo{…}”. Then change the todos.component.ts todos declaration to: todos: Todo[] = [];
That should help you out 😉
@didier pham what are you assigning this.todos to?
@Minh Chánh try using “!” after “content” and “completed” in Todos.ts
@Issam Boughedda hi I have an error for this.todos. saying not assignable to type string. don’t know what to do. why does it work for him but errors for us? please help
For the errors 1-3, those are caused by Typescript forcing you to initialize everything, to bypass this you can either add a “?” or a “!” after the variable name.
Ex. content?: string;
Perfect simple tutorial! Thank you very much
This was brilliant and just what I needed! Thank you
simple and perfect tutorial without confusing soo much things..thank you soo much?
You’re welcome ?
Thank you so much sir <3 this was easy to understand and implement!! Keep the good work going <3
You are most welcome
You’re a really nice teacher. Thanks for sharing your knowledge!
Thank you!
thank you so much for this great tutorial, can you please tell me what did you use for coloring those brackets and all?
This tutorial is very instructive and fun!
Thanks!
Thank you! Best todo app video ive ever seen. Simple and affordable
Glad you like it!
Thanks a lot! I really love your explanation! ♥
Really liked this video thanks, clear and concise
Just an amazing guide to get started and understand how Angular works!
Thank you!
This is great to get a general idea of the framework. Thanks a lot
Good teaches, fast enough & simple, thank you
Awesome video, really helpful and enjoyable!!! 🙂
Glad it was helpful!
Tyler, great explanation! We are waiting for more angular stuff from you! 🙂
Thanks for the tutorial. Great coverage of the basics.
I started learning Angular recently because the software company I work for uses it and want to learn Ionic at some point. So far, I really like it. It might seem hard to work with because there are so many files, but I promise you only have touch the HTML, CSS, TS, Module and Routing files only. The latter two are not hard to work with. Really hope you will consider more Angular tutorials in the future!