Understand Angular Signals in 20 Minutes

Angular Signals is a new way to manage values in the framework. In this video, I explain in a simple, clear and visual way how Signals work with examples. For example, Angular can automatically change values if associated values have changed.

An additional feature of Signals is Effects, which allow a function to be automatically re-executed if the values within it have been changed. Does this sound complicated? No worries, watch my video. I use a visual explanation and a step-by-step explanation with code examples.

Timestamps
00:00 What is Angular Signals?
01:45 How to create a simple signal?
02:21 How to change the value?
03:08 How to get the value?
03:42 Let's add Signals to the code
05:09 Writable and Computed signals
06:26 How do Computed Signals work?
07:14 How to create a computed signal?
08:27 Component Template
08:49 The Update Method is an additional method
09:59 Effects are an additional feature
15:42 The "allowSignalWrites" Option
16:33 Creating Effects Outside of a Constructor
17:03 Tracking Algorithm

Writable and computed signals are two interconnected halves of one system and concept. This functionality exists in other frameworks and programming languages and may someday be added to JavaScript (the proposal already exists).

Effects are an additional feature of signals that offer a convenient and useful ability to re-execute code when values have changed. In this video I explain in detail an important point in asynchronous execution.

▶️ I use visual explanation with infographics, animations, and simple code examples. I hope that you enjoy it and like and subscribe to my channel.

Thanks to the @Angular Team for a new useful feature.

For more tips and updates, follow me on:

#angular #angularsignals #angulartutorial #angularbeginner #framework

[cqz]

Thank you for your effort in creating the animation; that is a huge amount of work

[crazyraccoon]

Пример отличный, лучше чем сам Ангуляр предлагает.
Но произношение режет слух. Его бы подтянуть немного.

[Youramon]

Excellent video thank you so much for the easy explanation!!! One criticism would be to get a better microphone. Other than that, amazing stuff!!!

[roomiercg]

Incredible work and explanation, simple and straightforward. I like how you have created and organized the video, you have earned a subscriber, keep it up!

[paoloperana]

Perfect explanation, very nice graphic! Great work, thank you!

[CaptainCsaba]

I honestly found signals not so easily understandable but you videos always help. They are very good at explaining all the details in a simple manner. Thank you!

[KICK]

marvelous visual style explanation, Thanks a lot🎉. I am waiting for new video of Angular concept.

[sidduhedaginal]

Visualization explanation is really good....Keep up the work.

[sajjadhossincse]

Nice explanation. You got a subscribe for this video 😉😉

[VishalTheK]

The best and simple video on "Signals in Angular" with excellent video effects.

[micUrCr]

Bro video needs about angular NgRX and RXjs related videos needed bro

[chunckyfreshnut]

It is like a variable pointed to a function

[zirexpl]

What does it give us? We could make all of these funcionality without signal and it would have be less code than this. So what's the point to use signals?

[DeepakKumar-spm]

After see your video I understood my doubt

[fatihenesusta]

Hey Igor,

This is a beautiful work of teaching a new concept keep it up mate! I have a one question for the tracking algorithm, at the beginning you set autoUpdate to be false since then computed returns the else value 0 and it is not being tracked. However you clicked plus() has been executed and over there we have autoUpdate to be true, then when total = computed() worked i expected it to run if line and expected to see the total to be 300$ but it stayed in 0 could you explain it?

Thank you for this amazing video.

edit1: Is it because when we first initialize signal (total in this case) and total value is calculated by the dependent signals and whatever i do afterwards to trigger it would not trigger it, since at the begin it not initiliazed with its dependant signals?

[NguyenLong-obfc]

omg this made me realize that i'm a visual typa learner, thank you a lot for editing this video, love love love

[dmkz]

Игорь, спасибо за такое подробное и наглядное объяснение. Анимация впечатляет. Единственное, чего не хватило в видео, это какие-то примеры использования сигналов. Я правильно понял, что сигналы будут удобны для создания страниц со сложным и запутанным состоянием? И, если не секрет, сколько ушло человеко-часов на монтаж такого видео?)

[codeme]

Honestly it's the first time understanding this new feature after watching tons of videos. You can even make little kids understand Angular which is unbelievable! Much Respect...

[ImCopyCat]

It's really amazing!!! Easy way to understand the concept

[uswanto-]

your content and illustration is actually best! but idk the way you explain it makes me bit sleepy, sorry but it just input.. i hope you improve it