Angular Signals Example - Learn Them by Doing

Learn how to build an Angular project from scratch by Angular signals example. In this video we will fully implement the todo list with filtering, editing, deleting and competing features.
TIMESTAMPS
0:00 Introduction
1:21 Initial project
1:52 Adding components
3:22 Splitting project
6:10 Adding interfaces
7:07 Service with Angular signals
10:04 Implementing header section
14:01 Implementing main section
16:05 Filtering todos
20:13 Implementing footer section
28:59 Implementing a single todo
31:29 Implementing editing
39:55 Removing todos
41:36 Completing todo
44:21 Adding autofocus
45:53 Toggle all todos
► CHECK MY COURSES - monsterlessons...
MOST POPULAR COURSES
► Building real project with Angular + NgRx - monsterlessons...
► Building real NestJS API - monsterlessons...
► Javascript interview questions - monsterlessons...
► Angular Interview Questions monsterlessons...
► Building real fullstack project - monsterlessons...
► Mastering Git - monsterlessons...
► Mastering Docker and Docker Compose - monsterlessons...
► Building real project with React Hooks - monsterlessons...
► Building real project with Vue + Vuex - monsterlessons...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/mon...

[@Brendan2Alexander]

Your channel is ridiculously helpful. I always feel jacked to get into my angular projects after watching a few of your videos

[@MonsterlessonsAcademy]

Glad to help!

[@LukeAvedon]

Thank you for all the videos with signals examples. I am super jazzed about signals.

[@MonsterlessonsAcademy]

Glad you like them!

[@user-iu7de2ji6b]

your tutorials have such a nice understandable pace.

[@MonsterlessonsAcademy]

Glad to hear that!

[@botondvasvari5758]

what if there are more complex filters that can come from different components ?

[@MonsterlessonsAcademy]

Then you need to change your code acording to requirements.

[@tomozi1]

Best channel and lessons. Thanks

[@MonsterlessonsAcademy]

Glad you think so!

[@henrik3098]

this is a good angular channel

[@MonsterlessonsAcademy]

Thanks!

[@Santon-Motho]

Thanks for another awesome video on Angular. Your channel and courses are top notch 💯

[@MonsterlessonsAcademy]

Glad you like them!

[@user-cx7wz9mm1q]

Impeccable, as always.

[@MonsterlessonsAcademy]

Wow, thank you!

[@tinodueppotell4869]

Danke!

[@MonsterlessonsAcademy]

Vielen dank für Ihre Unterstützung. Das ist sehr wichtig für mich!

[@christopheradolphe]

Hi Oleksandr, thank you for this great tutorial about Angular signals. I've read some articles over the web about when to use signals vs observables. Some of them advise to keep using observables in services and use signals in components. Your video clearly shows that a service can entirely work with signals. I'd really like to know what are your thoughts about this. Also what's that code editor you are using ?

[@MonsterlessonsAcademy]

I see zero reasons to use something in either service or comp. Don't read these articles :)
Use signals for simple state. Use RxJS when you need RxJS methods like distincUntilChanged, etc

[@christopheradolphe]

@@MonsterlessonsAcademy Thank you for your response and the great content!

[@jorgen180]

What is recommended approach to implementing custom input field validation while using Signals? Functionality provided in Reactive Forms doesn't yet seem to be reflected to Signals.

[@MonsterlessonsAcademy]

I don't use signals for custom validation. Just plain reactive form

[@manojv2893]

Thank you

[@MonsterlessonsAcademy]

You're welcome

[@valerigogichashvili]

Amazing as always!

[@MonsterlessonsAcademy]

Thank you! Cheers!

[@moegreen8543]

Are there already any standards (generally accepted rules) for writing variable names for signals?

[@MonsterlessonsAcademy]

Nope. It's wild west.

[@KushanShanuka]

while watching this, i feel angular signals feature is seems like vue refs.
by the way you explained well. thank you

[@muthu1046]

Thanks!

[@MonsterlessonsAcademy]

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

[@tinodueppotell4869]

Thanks - great Tutorial

[@MonsterlessonsAcademy]

Glad it was helpful!

[@AdelBasiony]

Isn't it better to move all computed signals to the service and just call them in the component? even if the signal is used once in a single component.
I'm really confused about which is the best practice.
Highly appreciate your videos.

[@MonsterlessonsAcademy]

Sure. If it is shareable than move it to comp. If not then not.

[@AdelBasiony]

Thanks a lot.@@MonsterlessonsAcademy

[@AdelBasiony]

can you please make a video using singals and Ngrx together in a project. Thanks.

[@MonsterlessonsAcademy]

I will add it to the list of ideas. Thanks

[@denysbilas3670]

HI! Thanx for sharing! I want ask you about architecture for front end application. What architecture do you use for your pet projects or work?

[@MonsterlessonsAcademy]

Typically by feature architectured like I showed here ruclips.net/video/IFTqfO_evlc/видео.html

[@dimitridoroshko]

Hey, man. What is your favorite framework out of the top three: angular, react, Vue?

[@MonsterlessonsAcademy]

I don't really like one of them more then others. Most importantly for me is to get paid for any of them. My personal preference is Elm but unfortunately it is not that popular.

[@felixmatusinio6438]

If we will use signal, do we still need rxjs? to be honest rxjs is quite pain in the ass.

[@MonsterlessonsAcademy]

I have a video about it
ruclips.net/video/WL7QEhdqh00/видео.htmlsi=h3BmPJld15fBJV1s

[@jerrytab4276]

combine rxjs and signals

[@USONOFAV]

ok so Signal is just an alternative to rxJS Subject?

[@MonsterlessonsAcademy]

Partially yes

[@4444-c4s]

🙏🙌

[@austinZen8800]

Thanks!

[@MonsterlessonsAcademy]

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