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: github.com/TylerPottsDev/angu...
// BECOME A MEMBER!!!
/ @tylerpotts
// FOLLOW ME ON TWITTER
/ tyler_potts_
// MY GEAR FOR CODING AND KZbin
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[@bilgekaankaplan1141]

he teaches you and make you smile with tiny miny jokes. what else can you want from an angular tutor?

[@orcaowlwizco369]

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!

[@krzaqabc]

Tyler, great explanation! We are waiting for more angular stuff from you! :)

[@user-rw3bc2hy4q]

Currently learning Angular for interviews. Maybe the best video for beginners I found! Great work! Thank you very much!

[@landtechjobs]

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!

[@toshiroh5997]

Do you still study angular? I'm starting to learn but its a lot of information all at once

[@codingat2am]

What a fantastic tutorial. I'll be honest, I am really liking Angular so far, it sorta clicks with me more than others tbh. So thank you very much for helping me start this journey

[@serpentinefireball]

This was brilliant and just what I needed! Thank you

[@ludame]

Thanks for the tutorial! The best part of your videos is that you take your time to explain what each line of code is doing which I really appreciate!!

[@nilmendes7710]

This tutorial is very instructive and fun! Thanks!

[@caraket8114]

Thanks for the tutorial. Great coverage of the basics.

[@somebodyCEO]

Perfect simple tutorial! Thank you very much

[@rada1584]

Thank you so much for this video Tyler, it just helped me to figure out what I've learned in my course early this last week. Thanks once again

[@yevhendmitriiev709]

Thank you! Best todo app video ive ever seen. Simple and affordable

[@TylerPotts]

Glad you like it!

[@luismanuelcastillocolombo3122]

This is great to get a general idea of the framework. Thanks a lot

[@pimchatp3018]

Thanks a lot! I really love your explanation! ♥

[@mercuary519]

THIS REALLY HELPED ME A LOT THANK YOU

[@saFeHD]

Just starting to learn Angular and more or less programming in general. Thanks for the tutorial, was really nice to follow on even as a beginner like i am :)

[@Zino592]

Thank you very much for this video! I followed along and was able to produce the application

[@liaafework3466]

Thank you for a great video...keep them coming. I´m trying to learn Angular!

[@leightonmanning8638]

Really liked this video thanks, clear and concise

[@pavanbhat5573]

Thank you so much sir

[@TylerPotts]

You are most welcome

[@adrianperez5175]

Hard to find good videos like this on Angular for beginners! Thanks!

[@TylerPotts]

You're very welcome!

[@ranoualachheb8382]

your video and your way of explaining is amazing and you are also fun to listen too, thank you

[@TylerPotts]

Thank you! 😃

[@JustynaSzulecka]

That's really great explanation. Great job! Thank you!

[@MrVois]

Very well explained. Keep going!

[@TylerPotts]

Thanks, will do!

[@Tonirel]

Just an amazing guide to get started and understand how Angular works!

[@TylerPotts]

Thank you!

[@YALW0506]

Thank you very much for this video man, I've learned a lot. Greetings from the Dominican Republic 😊.

[@TylerPotts]

Glad it was helpful!

[@Hektagor]

Awesome video, really helpful and enjoyable!!! :)

[@TylerPotts]

Glad it was helpful!

[@anuranjkp9377]

simple and perfect tutorial without confusing soo much things..thank you soo much🥰

[@TylerPotts]

You’re welcome 😊

[@michalhazan839]

Thank you for this video! It helped me a lot :)

[@victordallarosateixeira6226]

Thanks for the tutorial!

[@harinithapalanisamy6490]

This was a great video, thanks :)

[@zainshahbaz6511]

IT takes 3 days of my life to resolve errors,Heartly thanks alot brother

[@mariomendonca3135]

thanks a lot, very good video, its my first contact with angular, and I learned a lot

[@waterbottlexd1298]

My first project! Thank you!

[@OverDrive804]

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!

[@logan8283]

hi there same situation for me...so should i focus more on html css ts module and routings ?

[@lifeisbeautifu1]

Thank you, very clear.

[@kangajankuganathan4363]

Thank you, so detail tutorial

[@Latif127]

Excellent tutorial, thank you.

[@TylerPotts]

You are welcome!

[@FnaticMovieMakingArt]

it's a very clear tutorial. thanks a lot

[@yusbelydelgado681]

Great Tutorial!

[@randerins]

Excellent video, thank you a lot!

[@TylerPotts]

You are welcome!

[@zainshahbaz6511]

I love the way you teach THANKYOU SOMUC BROTHER

[@yasahanzengin3329]

Great tutorial, thanks!

[@TylerPotts]

Glad it was helpful!

[@williamsanchez4801]

Great video. Thanks for sharing your knowledge.

[@IFelipeTiburcio]

You're a really nice teacher. Thanks for sharing your knowledge!

[@TylerPotts]

Thank you!

[@ahikirizahenry1556]

Thank you so much for this tutorial. I have learnt much

[@TylerPotts]

Glad it was helpful!

[@petrnaboko8720]

Awesome tutorial bro! Thanks a lot!

[@TylerPotts]

Glad you liked it!

[@inhazfahim8270]

Damn bruh..very clear and informative.. 💯

[@SimoneMontagnani89]

[@TylerPotts]

Glad you like it!

[@aminefathallah4424]

Huge thanks ! keep going !!

[@TylerPotts]

Thank you

[@karolinaszulczyk4921]

loved it thanks so much

[@TylerPotts]

Glad you enjoyed it!

[@islammamado7137]

Great ,thank you very much for your video ,its very helpful

[@TylerPotts]

Glad it was helpful!

[@odysseaslogothetis8584]

i like it a lot. it s the 2nd ever video about angular I ve seen in my life and i was able to follow. it got difficult after the 6th thing he named todo

[@kiana_shohoudi]

It was perfect . Thanks' !🤩🤩

[@TylerPotts]

Glad you liked it!

[@mellamomarlo]

Thank you !

[@mrphyslaw]

Great video! Thanks!

[@TylerPotts]

Glad you liked it!

[@ramibenhmida4265]

really helpful thank you

[@rashiffrashiff1590]

Brilliant simple and Understandable. 🤝🤝🤝🤝

[@dotnetfullstack3217]

Excellent Video explanation.

[@mybootscamewithoutstraps]

I've used all 3 frameworks of React, Vue, and Angular. I've particularly worked with Angular professionally, and as a high school grad to be making 6 figures because of Angular, I've realized that it may not be as popular as React, but it's WILDLY effective when it comes to things such as huge data/form driven apps. You'd quickly get huge, cumbersome files if you were in the single file setups like the other 2 use, but with Angular, it keeps everything very structured and I've grown to love that. Also, it just comes with everything already, so you don't have to constantly import goofy things to make it work.

[@saheelsapovadia2354]

Awesome!

[@sharkkrish]

It's really superb

[@sksajid9567]

thank you so much for this great tutorial, can you please tell me what did you use for coloring those brackets and all?

[@djlivestreem4039]

great tutorial

[@muhammadarief4794]

nice tutorial sir..thank you

[@TylerPotts]

Most welcome

[@khaoulaouifaya585]

thank you so much

[@nkulway123]

Thanks!

[@latoyalegemah787]

Thank you for this video! How can I edit a task by clicking in place or using a button? I can't figure it out.

[@stefaniaia6615]

very good, thank you

[@TylerPotts]

Thank you for watching!

[@avijayan2]

Awesome!! TQ

[@USA-Visit]

awesome !

[@wanfirdaus6654]

Thank you man,

[@TylerPotts]

You're welcome!

[@vibhac7717]

Tyler, started learning Angular, with the todolist app and this is a nice video. I wanted to know, how to clear the input field value ?

[@subramanyak6187]

Dude I use react to make website. I wanted to know How Angular works. You explained everything required to get started or to get the brief view on Angular Thank you.

[@chasec4897]

brilliant tutorial man ! did Angular roughly 6 years ago then went to React, but might and hoping to get a job in angular so I had to re-learn the basics. I prefer React so much haha. Massively helped ! thank you so much !!

[@zenzomc9496]

video very usefull thank you

[@TylerPotts]

Glad it was helpful!

[@solobiker5235]

great lesson. Im react guy tooo. thanks. that's my first angular project. I really enjoy it.

[@TylerPotts]

Happy to hear it! 😁🙌

[@rishisharma8596]

thank you

[@manikantajupudi4129]

thank u so much.

[@TylerPotts]

You are most welcome

[@heisenberg4374]

YOU ROCK

[@lgiorgos1]

Why use a class model instead of an interface/type?

[@ilhamazhar4u]

Hello sense, more angular tutorial please :)

[@souravdutta5703]

Please do more videos on angular

[@satepestage3599]

Thx bro

[@raihanar5323]

if it is showing error in this part 14:39 , then change the code to "export class Todo{ content!: string; completed!:boolean; } It is because TypeScript 2.7 includes a strict class checking where all the properties should be initialized in the constructor. A workaround is to add the ! as a postfix to the variable name.

[@red1io]

you can use this method to delete a todo task : deleteTodo(i) { this.todos.splice(i, 1); } instead of filter method you used. thanx dude I have learned a lot from your tutorial

[@TylerPotts]

Thanks for sharing

[@mr_mridangam]

when i do this its doing the same to toggledone method its not removing the todo from the list .kindly help

[@vahid6355]

useful thanks

[@TylerPotts]

Glad it helped

[@paoloberi]

Thanks

[@timuromarbaev1660]

You can also add [disabled]="inputTodo === ''"" to input type=submit tag to prevent adding empty tasks to the list

[@bojidarboradjiev7533]

good job, its an ok Video

[@TylerPotts]

Thanks

[@adityaghaywat3648]

Hello Tyler....what if there are two same tasks? I mean if there is 'Task 1' in the list and we're trying to add task 1 again, what should we do so that the code will throw an error or exception that you can't add the same task?

[@Talk2Asap]

bravo

[@jamesbowring9528]

I'm trying to learn a framework like angular in order to better organise code. I always notice, when creating a new app, there is no option to enable routing. Is this a windows, new angular or something else thing going on?

[@yazedal-sayed1637]

actually helpful and might be the only video i ever do all four for (like , sub , comment AND share)

[@TylerPotts]

Thank you!

[@bgmigameplay1345]

what is the short cut you used to delete whole element of html at 7.35 min

[@scaffus]

Hey, what's the theme you'r using and wich extension allows auto bracket closing in html code please ? :))

[@sabapervez7226]

Use vs code as Editor

[@todd2133]

What is the color theme you are using here?

[@ansikunjumon11]

Thankyou for this video! I am having trouble with the line-through(ie, for completed tasks) .Please help me :)

[@sonalikabadi4979]

Same

[@pauljere7013]

awesome video!.... whast the name of you vs code theme.. its😅 nice

[@TylerPotts]

Thanks and SynthWave 84