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!
► CHECK MY COURSES - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
REFERENCES
► Source code - github.com/monsterlessonsacad...
► Angular Tutorial for Beginners - • Angular Tutorial for B...
RECOMMENDED VIDEOS
► Angular Tutorial for Beginners - • Angular Tutorial for B...
► Vue JS Crash Course - • Vue JS Crash Course fo...
► React Hooks Full Course - • React Hooks Tutorial f...
► Typescript Course for Beginners - • Typescript Crash Cours...
STUFF I USE
► My mac mini for home on Amazon - geni.us/mADK6ob
► Mac macbook to go on Amazon - geni.us/t0fC
► My monitors on Amazon - geni.us/aRoFoR
► My mouse on Amazon - geni.us/FTzq
► My keyboard on Amazon - geni.us/wAjpl
► My Synology NAS on Amazon - geni.us/H9BeFo
► My Seagate IronWolf 4TB HDD on Amazon - geni.us/09Hvpm
► My external SSD drive on Amazon - geni.us/jg3MGNt
► My external HDD drive on Amazon - geni.us/5HCIAX
► My monitor arm on Amazon - geni.us/OuX1
► My chair on Amazon - geni.us/wGWq
► My speakers on Amazon - geni.us/wM4fIn
► My coffee machine on Amazon - geni.us/zP1uEbW
► My standing desk - www.fully.com/en-eu/standing-...
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.

[@MonsterlessonsAcademy]

Learn advanced Angular and NgRx in my course - kzbin.info/www/bejne/eqrOnaukeJeLhpI

[@octavian3033]

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

[@MonsterlessonsAcademy]

Great to hear!

[@gabrielphelipe8801]

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!

[@MonsterlessonsAcademy]

Great to hear!

[@gumundurhelgi5426]

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!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@40tx]

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

[@MonsterlessonsAcademy]

Awesome, thank you!

[@Francisco-Gutierrez]

Great video man, thanks for sharing.

[@MonsterlessonsAcademy]

I'm happy that you like it!

[@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.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@techniceties7642]

@@MonsterlessonsAcademy Awesome , I got my First Job after learning from your Videos.

[@MonsterlessonsAcademy]

@@techniceties7642 Awesome!

[@petrbrozek5452]

Thanks for your tutorials!

[@MonsterlessonsAcademy]

Thank you so much for your support! It means a lot to me.

[@SoozeC]

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

[@MonsterlessonsAcademy]

Glad it was helpful!

[@SoozeC]

@@MonsterlessonsAcademy I've started following along your video where you link the to-do app to Firebase but the code seems different, as in, there is an app.config.ts file and standalone components. Is there a course in between this original todo tutorial and the Firebase one that I've missed? Thank you

[@SergioUkrAr]

Thanks, you are best teacher

[@MonsterlessonsAcademy]

Thank you!

[@masdaug]

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

[@MonsterlessonsAcademy]

Thank you so much for your support. It means a lot to me!

[@ashiktm4188]

Thanks great video for beginner

[@MonsterlessonsAcademy]

Glad it was helpful!

[@hamadsalahud-din3617]

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.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@hamadsalahud-din3617]

@@MonsterlessonsAcademy Is there any of your video that also explains creating custom Directives and pipes? if not then i would to see that as well to develop more understanding on it. Thank you.

[@v.miller]

Thanks!

[@MonsterlessonsAcademy]

Thank you so much for your support. It means a lot to me!

[@dianasicevaia4840]

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?

[@MonsterlessonsAcademy]

Hi Diana, thats a nice question. It's difficult to compare because I have 11 years programming experience and 4 years working with Angular. I would say for beginner it doesn't matter how much time you spent. Each hours that you think you burn trying to understand logic, architecture and pattern are the knowledge that you will use long time. Repeating is good, not understanding anything fully is fine, drawing on paper also if it helps you to understand better. It also doesn't really matter how big the app is. All patterns and good code can be applied to bigger apps and be same scalable. P.S. And to answer you question I spend 1-2 hours to code the whole app, architecture and planning were done on the fly in my head because the app is quite small.

[@carlosbriceno9871]

@@MonsterlessonsAcademy Wow that's a great answer. I have to say that not too many people take the time to answer questions with such a great level of detail and kindness. This speaks better of you than any tutorial. You have a new follower here. Thank you for your service to the community.

[@MonsterlessonsAcademy]

@@carlosbriceno9871 Glad to hear that!

[@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

[@MonsterlessonsAcademy]

Thanks for the tip!

[@01-a.s.praneetha99]

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

[@MonsterlessonsAcademy]

You are welcome! I will add you idea in future videos list.

[@tarquin161234]

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

[@tarquin161234]

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

[@MonsterlessonsAcademy]

You are totally right. I said it wrong

[@alexandreurbini5674]

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

[@MonsterlessonsAcademy]

Here is a video about my editor kzbin.info/www/bejne/j6Ovmqidec12q80 and defx plugin to vim which does navigation.

[@alexandreurbini5674]

@@MonsterlessonsAcademy Thanks again!!

[@tarquin161234]

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?

[@MonsterlessonsAcademy]

It's plain html attribute autofocus. I just wrote it with camecase on accident and it works in both ways. Absolute paths allow you to avoid "../../../../foo" imports where you have zero understanding from where the import comes. Also with absolute path you can make find/replace in all files as everywhere the import is the same.

[@nevadainnovations9791]

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$ ?

[@MonsterlessonsAcademy]

It's not. You are not using correct import. rxjs.dev/api/index/function/combineLatest

[@marmey264]

Thanks a lot for this tutorial. There is a problem with the combineLatest operater as it is deprecated. Do you have a tip of how to write this today?

[@marmey264]

I've found a way to use it. this.visibleTodos$ = this.todoService.todos$.pipe(combineLatestWith( this.todoService.filter$) ).pipe( map(([todos, filter]: [TodoInterface[], FilterEnum]) => { console.log('combine', todos, filter); if (filter === FilterEnum.active) { return todos.filter(todo => !todo.isCompleted) } else if (filter === FilterEnum.completed) { return todos.filter(todo => todo.isCompleted) } return todos; }) )

[@MonsterlessonsAcademy]

It is not deprecated. Please use correct imports. rxjs.dev/api/index/function/combineLatest

[@curlytales5811]

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

[@MonsterlessonsAcademy]

Then you can add a pagination if you want.

[@AshutoshKumar-oo3hc]

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?

[@MonsterlessonsAcademy]

It is normal, you should not feel bad about being stucked. Just dig the problem until you get through it. It will be improved with time. Normally after 10000 hours of coding you get used to write code from one place where you are stucked until other :) P.S. My longest problems took near 2 weeks 8 hours per day to fix the issue so I think you still on track

[@tarquin161234]

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?

[@MonsterlessonsAcademy]

In this case it doesn't matter but typically mutating data is more difficult to debug as you change previous values and can break in comparisons when angular or redux makes obj1 === ob2 and you didn't change the reference.

[@gihanubayawardana366]

Don't you need to export TodosComponent in TodosModule ? I got an error without exporting it

[@MonsterlessonsAcademy]

If you use it outside then yes. If through routing then no.

[@user-cg8vw1ht3b]

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.

[@MonsterlessonsAcademy]

Hi. I have 2 videos about this topic kzbin.info/www/bejne/gYWrn617rcxnmJYsi=bTKHl_3B9Bbod3aU kzbin.info/www/bejne/e3_MeIJqrq-CkKMsi=oKMFV-33W7pCH078

[@user-cw9ng2cs1o]

Hi, where I can find source of styles or link to repo?

[@MonsterlessonsAcademy]

In the description of the video github.com/monsterlessonsacademy/monsterlessonsacademy/tree/87-angular-todo-list-app

[@user-cw9ng2cs1o]

@@MonsterlessonsAcademy sorry I missed it. Thanks for your content, it help to understand RxJS more deeply 👍

[@ramasaranyachatrathi1509]

how can i improve my coding skills any tips

[@MonsterlessonsAcademy]

Just code and do projects. If it is too difficult you can follow along one of my course where we build real projects like Angular NgRx course. monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch But it is important to not just watch it but write all code yourself. After that try to change and do new things there.

[@NagatoKamiPain]

why not using CLI to create components and modules? and vim... :/

[@MonsterlessonsAcademy]

First of all to show how to create everything from scratch. Secondly it may be difficult in deep folder nesting structure and it is faster to just copy the folder if needed.

[@gigakvachakhia4777]

i would really love to see your course about nestjs and angular fullstack on udemy or anywhere.

[@MonsterlessonsAcademy]

I already have a full NestJS course where we create an API for medium clone. The important thing is that it fits to any frontend medium clone project. Which means you can learn any frontend framework from my courses and it will work out of the box with this NestJS API Nest JS course: monsterlessons-academy.com/p/nestjs-building-an-api-for-real-project-from-scratch Angular course: monsterlessons-academy.com/p/angular-and-ngrx-building-real-project-from-scratch

[@gigakvachakhia4777]

@@MonsterlessonsAcademy i have finished that course 😇😇. backend side was wonderfully explained as usual. thats why it leaves desire to further dive into fullstack + deployement to fully grasp the whole concept. i just mentioned angular because it seems to be so close to nestjs architecture. couldnt resist the urge 😅😅

[@gigakvachakhia4777]

@@MonsterlessonsAcademy your explanations are great btw

[@MonsterlessonsAcademy]

@@gigakvachakhia4777 Well yes you are totally right. NestJS fully copied ideas with dependency injections from Angular. Thanks for the idea about the course!

[@alessandrobruni568]

hello Alex. i have lost you from minute 50.29 when you started to combine 2 streams. All the code after is beatyfull but hard to understand for me at the moment. Can you pls telll me where i can find some more education onthat topic in your courses or other resources on the web? Is just my second week on angular, i have experience on js and spring, but not in react . I have to learn Angular fast for my new job. Any suggestion is apriciaterd. Thank you. ciao

[@MonsterlessonsAcademy]

If you have problems only with understanding rxjs streams than you need just that for now. Check these videos kzbin.info/www/bejne/aIWWd2iKm9eMrassi=_4pJLBcAWR-OlFYG kzbin.info/www/bejne/aKutg6ppeNGSjNUsi=1jHFrsc2EkhVDfBq kzbin.info/www/bejne/ine7oaKXl9x1nLcsi=ADSceFMWGE_UxOme

[@alessandrobruni568]

@@MonsterlessonsAcademy

[@tarquin161234]

30:00 you didn't link the typescript video !

[@MonsterlessonsAcademy]

It's in the recommended section below the video. Here you are kzbin.info/www/bejne/iIm9oHain9aMhac

[@md.rifatislamrobin3536]

2:05:00

[@ivanpetrovic6209]

Great content I love how you use observables. I noticed that angular documentation recommends registering service in @Injectable() decorator with providedIn: 'root'. Can u share your thoughts about this?

[@MonsterlessonsAcademy]

The service will be available application wide as a singleton with no need to add it to a module's providers array. I'm not a fan of it as for me it goes again the ideas of defining module dependencies as it just makes service global.

[@kingaschygulla9017]

Hi, I can't assign TodoInterface to todoProps. What is the problem here? "Property 'todoProps' has no initializer and is not definitely assigned in the constructor.ts(2564) (property) TodoComponent.todoProps: TodoInterface"

[@MonsterlessonsAcademy]

You project is generated with strict: true mode. Either set in tsconfig strict:false or todoProps: TodoInterface | undefined because Typescript can't be sure that we provided it.

[@kingaschygulla9017]

@@MonsterlessonsAcademy Thank You very much!