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
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 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
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!
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 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.
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.
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?
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.
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$ ?
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?
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.
@@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.
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
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
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?
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
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
If you have problems only with understanding rxjs streams than you need just that for now. Check these videos ua-cam.com/video/2T3F5TfrYwI/v-deo.htmlsi=_4pJLBcAWR-OlFYG ua-cam.com/video/2zJRw3Cl_Vs/v-deo.htmlsi=1jHFrsc2EkhVDfBq ua-cam.com/video/TFXpoabwBfU/v-deo.htmlsi=ADSceFMWGE_UxOme
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.
Hi. I have 2 videos about this topic ua-cam.com/video/KTHnzExg4b4/v-deo.htmlsi=bTKHl_3B9Bbod3aU ua-cam.com/video/ENiGO4yJOZA/v-deo.htmlsi=oKMFV-33W7pCH078
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.
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.
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
@@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 Well yes you are totally right. NestJS fully copied ideas with dependency injections from Angular. Thanks for the idea about the course!
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"
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.
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?
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.
WATCH NEXT: Angular with NgRx - Building Angular Project From Scratch - ua-cam.com/video/vcfZ0EQpYTA/v-deo.htmlsi=BptT7eqgflHIoQiQ
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
Awesome, thank you!
Awesome content! You sir have a great way to teach. By the way, respect for using vim 🤩
Thank you so much for your support. It means a lot to me!
Thanks for your tutorials!
Thank you so much for your support! It means a lot to me.
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.
Glad it was helpful!
@@MonsterlessonsAcademy Awesome , I got my First Job after learning from your Videos.
@@techniceties7642 Awesome!
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!
Great to hear!
Exactly what I was looking for on reactive angular using rxjs. Great tutorial.
Great to hear!
Thank you - you explain everything so clearly - this has been a great help
Glad it was helpful!
@@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
Thanks!
Thank you so much for your support. It means a lot to me!
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!
Glad it was helpful!
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.
Glad it was helpful!
@@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.
Great video man, thanks for sharing.
I'm happy that you like it!
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?
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.
Thanks, you are best teacher
Thank you!
Thanks great video for beginner
Glad it was helpful!
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?
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.
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$ ?
It's not. You are not using correct import.
rxjs.dev/api/index/function/combineLatest
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?
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;
})
)
It is not deprecated. Please use correct imports.
rxjs.dev/api/index/function/combineLatest
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?
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.
@@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.
@@carlosbriceno9871 Glad to hear that!
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
You are totally right. I said it wrong
What if there are 100 plus task do we have like pagination to handle this??
Then you can add a pagination if you want.
Thank you great video. Also what IDE are you using and what tool are you using to navigate through your folder structure so easily?
Here is a video about my editor
ua-cam.com/video/YrLiugDhCuk/v-deo.html
and defx plugin to vim which does navigation.
@@MonsterlessonsAcademy Thanks again!!
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
Thanks for the tip!
Don't you need to export TodosComponent in TodosModule ? I got an error without exporting it
If you use it outside then yes. If through routing then no.
This was veryhelpful..!!! Can you do the unit testing process video for this??
You are welcome! I will add you idea in future videos list.
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?
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
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
If you have problems only with understanding rxjs streams than you need just that for now. Check these videos
ua-cam.com/video/2T3F5TfrYwI/v-deo.htmlsi=_4pJLBcAWR-OlFYG
ua-cam.com/video/2zJRw3Cl_Vs/v-deo.htmlsi=1jHFrsc2EkhVDfBq
ua-cam.com/video/TFXpoabwBfU/v-deo.htmlsi=ADSceFMWGE_UxOme
@@MonsterlessonsAcademy
You should say "target" as "tar"-"git" like you said git at 4:14 😀
30:00 you didn't link the typescript video !
It's in the recommended section below the video. Here you are ua-cam.com/video/RXZoCljqYOE/v-deo.html
Hi, where I can find source of styles or link to repo?
In the description of the video
github.com/monsterlessonsacademy/monsterlessonsacademy/tree/87-angular-todo-list-app
@@MonsterlessonsAcademy sorry I missed it. Thanks for your content, it help to understand RxJS more deeply 👍
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.
Hi. I have 2 videos about this topic
ua-cam.com/video/KTHnzExg4b4/v-deo.htmlsi=bTKHl_3B9Bbod3aU
ua-cam.com/video/ENiGO4yJOZA/v-deo.htmlsi=oKMFV-33W7pCH078
how can i improve my coding skills any tips
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.
why not using CLI to create components and modules? and vim... :/
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.
i would really love to see your course about nestjs and angular fullstack on udemy or anywhere.
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
@@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 😅😅
@@MonsterlessonsAcademy your explanations are great btw
@@gigakvachakhia4777 Well yes you are totally right. NestJS fully copied ideas with dependency injections from Angular. Thanks for the idea about the course!
2:05:00
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"
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.
@@MonsterlessonsAcademy Thank You very much!
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?
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.