Build a Todo App With Angular - Angular Todo List Tutorial

In this video we will build a todo app with Angular. It may sound that it's a simple application but we will structure our angular todo list in a correct and scalable way so it is the good example of flexible architecture and correct Angular patterns. We will also use RxJs a lot as it's the core component of Angular which simplifies working with data streams and building our Angular todo list.

By the end of this Angular todo list tutorial you will have enough knowledge about structuring Angular applications and implementing different components in correct way. Build a todo app with Angular as a first project for your portfolio!

FOLLOW ME

REFERENCES

RECOMMENDED VIDEOS

STUFF I USE

Disclosures: All opinions are my own. Sponsors are acknowledged. Some links in the description are affiliate links that if you click on one of the product links, I’ll receive a commission at no additional cost to you. As an Amazon Associate I earn a small commission from qualifying purchases.

[tx]

I found your signals version of this project first and really enjoyed it. As a developer, we don't always get to pick the version of the tools we use. It's very instructional to see the exact same project done with RxJs. Thank you

[octavian]

Exactly what I was looking for on reactive angular using rxjs. Great tutorial.

[DeployFriday]

Thank you very much for this tutorial. Great content. I love the way you present and explain material. This is not the first time that you've been a great help. Keep up the amazing work.

[gumundurhelgi]

Great content, really helped to me understanding how to structure a scalable application and understanding typescript better. Diving into typescript and RxJs on your channel next. Cheers!

[gabrielphelipe]

Awesome tutorial! It's very clear and concise. I'm really enjoying your videos, it's really helping me to improve my skills with Angular!

[SoozeC]

Thank you - you explain everything so clearly - this has been a great help

[hamadsalahud-din]

Great video. It has cleared up my concepts of RxJs. amazing technique to reflect the data changes with making use of the method .Subscribe(). loved it.
bro you rock.

[masdaug]

Awesome content! You sir have a great way to teach. By the way, respect for using vim 🤩

[tarquin]

38:15 - Number.toString() parameter is actually to convert number to a certain base, rather than number of characters.
Hope these comments are not annoying you

[dianasicevaia]

Thanks a lot for this tutorial and for demonstrating the usage of async pipes! I understand that this is a simple app, but (for me as a beginner), it seems a bit complicated and hard to follow the architecture. Even with such a great explanation 2h tutorial, it took me almost a whole day to repeat it. In real life, how much time would you spend on an app similar to this? And how do you plan the architecture? Does it come to mind while getting experience or there are some tips like drawing it on paper first?

[tarquin]

You should say "target" as "tar"-"git" like you said git at 4:14 😀

[haroldpepete]

great tutorial but i think you can reuse update method in service and use it for update input value and mark as toggle completed, and you could use pipe to show count of task completed or not, but in general was amazing, but i think you use obserrvable a lot

[nevadainnovations]

Regarding minute 50 in the video, combineLatest is deprecated. The new operator is combineLatestWith but it doesnt work with the solution you show for combineLatest. Do you know how the updated combineLatestWith can be used with todos$ and filter$ ?

[-a.s.praneetha]

This was veryhelpful..!!! Can you do the unit testing process video for this??

[cgvwhtb]

Hello.Thanks for the awesome videos.
I wanna became middle angular developer.But I don't know how to become it. Can you please help me somehow with it? Maybe you can tell me about some roadmaps or maybe you have some courses for improving technical skills?
Thanks for the answer.

[AshutoshKumar-oohc]

I have learned all the concepts about Angular, but when I try to make my own application, I get puzzled about many things. It took me 3 hrs to just make a basic application with navbar, texts and few buttons. How can I improve, any tip?

[tarquin]

1:59:38
Line 39-42, why not just do todo.text = text; return todo; ? Is it because we need to return a new object? If so, why is that needed?

[tarquin]

Thanks for another great video.

23:00 what is autoFocus (with capital F)? Can't find it on google or Angular docs.
Is it the property for autofocus html attribute? If so, why use the property instead of attribute?
Is this an Angular specific tecnique?

13:25 what is the reason to use absolute paths?

[curlytales]

What if there are 100 plus task do we have like pagination to handle this??

[alexandreurbini]

Thank you great video. Also what IDE are you using and what tool are you using to navigate through your folder structure so easily?