Understand Angular Signals in 20 Minutes
ฝัง
- เผยแพร่เมื่อ 14 ส.ค. 2024
- 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.
ℹ️ Source: angular.dev/gu...
☕️ Donation: / igorsedov
For more tips and updates, follow me on:
▪️Twitter: / theigorsedov
▪️LinkedIn: / igorsedov
▪️Instagram: / theigorsedov
Website: igorsedov.com
Email: me@igorsedov.com
#angular #angularsignals #angulartutorial #angularbeginner #framework
Thank you for your effort in creating the animation; that is a huge amount of work
Thank you so much for your comment!👍 I'm glad you liked the video and found the animations helpful. It's rewarding to know that the effort put into creating these animations effectively explained Angular Signals. I appreciate your support!
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!
Thanks for the kind words! 👍 I always try to make complex topics easier to understand. Your feedback is incredibly valuable, and it helps me make sure my explanations are hitting the mark. ✔️
🅰️ Angular Signals can be confusing! That's why I love comments like yours. I'm happy I could help make them clearer, and thanks for appreciating the detailed explanations! 👍
Feel free to leave comments like this anytime in the future!
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...
Thank you so much for your great and detailed feedback!👍 Hearing that my video helped you understand Angular Signals after watching many others is truly valuable to me. Making complex topics easy to understand is my goal. I carefully read all comments and watch people’s reactions to continue creating high-quality videos.👨💻 Your support and feedback mean a lot to me!
The best and simple video on "Signals in Angular" with excellent video effects.
Thanks for your positive feedback!👍 I'm glad you liked my explanation of Signals with the animation. Stay tuned for more Angular content coming soon!🔜
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!
Thank you so much for your fantastic comment and subscribing!👍 This helps me develop the channel and create new videos. It truly means a lot to hear that you found the explanation clear and engaging! This is exactly what I strive for when creating my videos. Starting next month, videos will appear on the channel more often.
Perfect explanation, very nice graphic! Great work, thank you!
Thank you for the positive comment!👍 I'm glad you liked the explanation and graphics. Stay tuned for more Angular🚀 content coming soon!
omg this made me realize that i'm a visual typa learner, thank you a lot for editing this video, love love love
Thank you very much for your positive feedback!👍 I appreciate it! I'm glad that you liked my video and that it helped you realize that visual explanations work best for you. This is the idea and purpose of my videos and my channel. My goal is to make learning easier, clearer, and more enjoyable through visual explanations.💡
Visualization explanation is really good....Keep up the work.
Thank you!👍 I'm glad you liked the visual explanations. I appreciate your support and will keep working to create more content!
Soclear with animation 💙
Thanks for the comment.👍 I appreciate you noticing the animation - graphics really help me explain things more clearly, simply and quickly.
Excellent video thank you so much for the easy explanation!!! One criticism would be to get a better microphone. Other than that, amazing stuff!!!
Thank you so much for your positive feedback!👍 I'm glad you found the explanation easy to follow. I appreciate your suggestion about the microphone-I'm working on improving the audio quality🎙 and plan to invest in this as the channel grows.🚀 Thanks for your support and for helping me improve!
So clear, thanks a lot for the effort 👌
I'm glad to hear that you found the explanation clear! That's exactly what I strive for in my videos. Thank you for your positive feedback!👍
Как хорошо что ты есть!
задолбался объяснять, теперь просто показываю джунам твои видео - и всем всё становится понятно 😂
Спасибо за отличный комментарий и добрые слова! 👍 Рад это слышать! Это лучшая оценка и это именно то к чему я стремлюсь.😊
animated and explained very nicely !!
Thank you!👍 I'm glad you liked the animation and explanation. If you enjoyed this video, you might also find my other videos on Angular interesting. Stay tuned for more content!
It's really amazing!!! Easy way to understand the concept
Thank you so much!👍 I'm glad you found the explanation easy to understand. The goal of my channel is to make learning complex things easy to understand by using visual explanation and high-quality content. Your support means a lot and helps me continue developing the channel.📈
After see your video I understood my doubt
Thanks for your comment!👍 I'm glad to hear that the video helped clarify your doubt. You might find other useful videos on my channel, including ones about new Angular features.
Спасибо большое за труд, понятно и наглядно объясняешь) побольше бы таких видео
Спасибо за комментарий! 👍 Мне приятно, что видео нравится и приносит пользу! Стараюсь делать понятные видео с логичными и легкими объяснениями, чтобы изучение Angular было более простым и быстрым (и графика в этом помогает, хотя и требует много времени на создание).
Видео будет становится все больше. Со следующего месяца частота выпуска новых видео увеличится. 📈 Сейчас я сконцентрирован на выпуске видео о новых функциях Angular 18🚀, но в следующем месяце будет продолжение Angular Signals с новым из 17.1-17.2 версий и другие темы.
i dont know how to thank you man! great video!
Thank you so much!👍 I'm glad you enjoyed the video. Your support means a lot to me! The best way to show your gratitude is by liking the video and subscribing to the channel. This helps support me and allows me to create more new videos.
You have really made Signals look simple and understandable.Thank you for the efforts put in.
That's great to hear!👍 Making complex concepts like Signals simple and understandable, just like you said, is exactly what I aim for on my channel. Thanks for letting me know it was helpful, and happy coding!👨💻
Clear and beautiful ! Loved the animations !
Thanks for your comment and subscription!👍 Great to hear you found my explanation clear and beautiful - that's exactly what I aim for! I'm glad you liked the animations in the video as well. This work requires a lot of effort and time. Stay tuned for more Angular🚀 content coming soon!
This is the video I have been looking for. I realy apreciate the way you explain the content. New subscriber.
I'm glad this was the video you were looking for! I appreciate that you liked my way of explaining. Welcome aboard as a new subscriber! 👍 Your support definitely helps create more videos like this.
Check out my other Angular🚀 content on the channel, you might find something else you like. Stay tuned for more Angular content coming soon!🔜
Great explanation. The graphics are very good to understand! Congrats!
Thanks for the positive feedback!👍 I'm glad you liked the video and became a subscriber! This allows me to develop the channel and increase the number of videos. New videos on Angular 18 are coming soon.🔜 I use graphics for better understanding and a more enjoyable viewing experience. I'm glad you found the graphics helpful in understanding Angular Signals!
Glad I see this video, before watching this video I was wondering what's the difference between signals and 2 way data binding. Now, it is clear.. and nice graphic by the way.. wish to see more content like this
I'm glad the video helped you understand the signals better and was helpful! 👍 I appreciate you noticing the graphics. Using visuals helps make explanations clearer and shorter. There will be more content like this. The goal of my channel is to create videos in exactly this style. I'm already working on a new video. Stay tuned for more Angular videos! 🔜
Animated clips clearly explaining the concept
Thanks for your feedback!👍 I am happy to hear that I am successful in using animation to improve and simplify the explanation of complex concepts. That is my goal.🎯 I'm finishing a new video about an important feature related to Signals, so stay tuned!👨💻 I appreciate your encouragement and support.
Nice explanation. You got a subscribe for this video 😉😉
Thank you for your comment and for subscribing!👍 Your support helps me create more videos. I'm glad you liked my explanation of Signals! Stay tuned for more Angular content coming soon. 🔜
You earned a new subscriber.
Excellent explanation video!
Thanks so much for subscribing!👍 I'm glad you found the video explanation excellent.🙂 I put a lot of effort into clear visuals and infographics to make these concepts easier to understand. Welcome to the channel! ▶️
Brilliant explanation mate! Appreciate the efforts!
Thanks so much for the comment and your time! 👍 Feedback like yours is what keeps me going, and I'm glad you found the explanation helpful! 👍 I love sharing knowledge.👨💻
Игор спасибо болшое! Очень информативное видео!
Спасибо за комментарий!👍 Я рад что мои объяснения помогают!
I think your work is awesome, I know how hard is to animate like this good job keep going
Thanks for the great feedback!👍 I'm glad to hear that you liked it and I appreciate you noticing the animation work. You're absolutely right, it takes a significant amount of effort, but the positive feedback makes it rewarding.🏆 Thanks for your support! I'm already working on a new video. 🔜
@@theigorsedov I'm also content creator on youtube for Georgian comunity KUDOS
Thanks for letting me know. I always appreciate hearing from fellow creators. Wishing you success on TH-cam.🔝🏆
Great video, thank you very much ! The attention to details in animations and the video rythm are great !
Thanks for the awesome feedback!👍I'm glad you liked the animations and rhythm of the video. More Angular🚀 content coming your way! Stay tuned!
So good
Clear with animations
I subscribe
Thanks so much for your comment and subscribing to the channel! 👍 This support is what helps the channel grow and create more videos like this. I'm very pleased that the effort put into animation is useful. I'm already working on the next video.
you are awesome
Thank you very much for your kind words!👍 I'm glad you liked my video about 🅰️ Signals! Your support is really important and helps my channel grow.
Игорь, спасибо за такое подробное и наглядное объяснение. Анимация впечатляет. Единственное, чего не хватило в видео, это какие-то примеры использования сигналов. Я правильно понял, что сигналы будут удобны для создания страниц со сложным и запутанным состоянием? И, если не секрет, сколько ушло человеко-часов на монтаж такого видео?)
Спасибо за комментарий и подробный отзыв!👍 Рад что видео и анимация понравилась! Про примеры использования понял, спасибо. Да, в большей степени сигналы полезны при создании страниц с большим количеством взаимосвязанных данных (сложные формы, dashboards, визуализация данных). Сигналы помогают организовать код и упростить его обслуживание. Например, форма которая зависит от запросов к API и данные из ответов также влияют на другие части интерфейса. Сигналы предлагают структурированный и предсказуемый способ управления этими взаимосвязанными точками данных. Они позволяют вам определить, как работают зависимости данных и как компоненты реагируют на изменения.
Одна из первоначальных целей сигналов была помощь в будущем в отказе от использования zone.js. Но на данный момент, команда Angular нашла способ как уйти от zone.js без использования сигналов. Об этом у меня будет отдельное видео (в Angular 18 был сделан первый небольшой экспериментальный шаг).
Возможно в будущем сигналы появятся в JavaScript: github.com/tc39/proposal-signals
По поводу времени, которое ушло на создание видео - я даже не знаю😊 Примерно уходит 3-4 часа на одну минуту видео. Примерно получается 60-80 часов, но скорее всего больше из-за того, что я часто что-то переделываю (идеи приходят в процессе). Я думаю не менее 100 часов.
@@theigorsedov Как идея нового видео. Можно взять какую-нибудь осмысленную сложную и взаимосвязанную страницу и наглядно показать как это делалось раньше и как это теперь можно сделать с новинками 17-ой и 18-ой версий. Это будет хорошим подведением итогов, после того как вы закончите цикл с новинками в Ангуляре.
Спасибо за идею.💡 Вы говорите о практическом видео - я думаю о таких видео, но немного в будущем. Также я думаю о стримах с вопросами в чате и разборами кода, но это в будущем. Более ближайшее - я скоро начну использовать комьюнити на TH-cam (первично) и LinkedIn/Twitter для советов, практики, Q&A и подобного.💬 Сейчас моя цель - это создание видео с упором на объяснение концепций или новых функций. Я хочу чтобы канал в итоге стал большим туториалом от А до Я. С июня у меня будет все больше времени для создания видео и количество видео и, соответственно, частота их выпуска будет расти. В ближайшем плане еще два видео о Signals (новые фичи в 17.1 и 17.2).
Я также хочу объяснить несколько паттернов, которые реализованы в Angular и полезны для понимания как Angular работает "под капотом". Обычно понимание паттернов является сложным из-за их абстрактности в теории и сложности охвата в практике.
С ростом аудитории канала я смогу дойти и до практических видео о которых вы говорите. Эти видео будет немного быстрее создавать.
@@theigorsedov Успехов вам в начинаниях!
Спасибо большое!
Please do all full angular video which covers all basic to advanced.
Thanks for the comment! This is exactly what I strive for and the goal of my channel. I'm currently working on speeding up the release of new videos. There will be a new video about an important topic coming soon.
very nice
Thank you! 👍
@@theigorsedov Can you do the same animation with angular change detection and angular life cycle ?
Thanks for the video topic suggestions! I have an Angular life cycle video planned for June or July.
Angular's change detection mechanism heavily relies on zone.js for scheduling and tracking changes within the application. While Angular 18 introduced an experimental feature called 'zoneless change detection', zone.js remains the default.
I am closely monitoring this development, and as soon as there is enough information, I will publish a video about it. It could be this month, but it might be later.
@@theigorsedov Many thanks
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?
Thank you very much!👍 I'm glad you liked the video. I strive to make complex concepts easy to understand. Your subscription truly helps develop the channel and helps me to create more videos for you.
Yes, you understood correctly (in "edit1"). When the total signal (computed signal) is first initialized, Angular identifies (tracked) the signals that are read inside (with getter functions). This list is constructed only once, during the initial execution. Subsequent changes to "autoUpdate" won't cause Angular to re-evaluate this list. It's important to remember that Angular only tracks dependencies during the first execution.
I hope I was able to explain this point clearly. I'm glad to help you! Feel free to ask questions.🤝
@@theigorsedov I have one more question, today i decided to implement signals to my project i have one table component which is being used by different pages. I have a another component lets name it A which triggers signal if rows of table is going to be changed which i fire events from. I also have a service between them to communicate with each other. So i set up a signal in the service and i set a signal from A component to be row from the table for example. So the rows gets deleted from the table and it gets added to another page which uses the same table component. (so far correct) However, when i reach that page (the row must be added here the other table page) signal is getting called in the init again with the same value which results in deleting the very same row from the other page i have sent. How can i overcome it? I don't want signal to send the same values.
Unfortunately, I can't engage in deep dives into code issues within the comments due to time constraints. I try to create quality content, which takes a lot of time. I also try to respond to almost all comments, but I don't have time to help resolve issues like this.
It is like a variable pointed to a function
That's an interesting way to look at it! In some ways, computed signals are similar to a variable holding a function.😊
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
I'm glad you liked the video and noted the graphics. Thank you for your opinion. With every new video, I strive to improve.
Bro video needs about angular NgRX and RXjs related videos needed bro
Thanks for the topic tips for new videos.👍 RxJS and NgRX are very important topics in Angular, and I definitely plan to create good videos about them. I'm currently focused on the new features of Angular 18🚀, but I'm almost done with that. These two topics are on my immediate list.
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?
You're right, you can achieve similar functionality without Signals. But Signals offer some advantages. Signals offer a more granular approach to change detection compared to the full tree checks of traditional methods. This can lead to significant performance improvements in complex applications with many components.
Signals can create a clearer mental model for developers, especially those not familiar with RxJS operators. They offer a more straightforward way to track data changes and react accordingly.
Another benefit of Signals is that they promote a clean interface for communication within your application. This is similar to how APIs provide clear interfaces for communication between different software systems. Just like with APIs, clear interfaces make your code easier to maintain, test, and reuse.
Overall, Signals can improve performance, clarity, and maintainability in your Angular applications.
@@theigorsedov Ok, thank u for the answear. It's more understandable now
👍
way too many animations
Thanks for the feedback! 👍 I appreciate you letting me know. I take all feedback into account when creating future videos, so this is really helpful.
It’s not necessarily the fact that there is too many animations for me, as it is more so hard to tell if the animation is an explaination or if it’s showing the actual results of what they are doing.
@@masterfulai My primary goal is to use animations to make explanations easier and faster. While some animation enhances visual appeal, I try use it sparingly. Although I think the nice appearance enhances the pleasant and ease of viewing. I'm still refining my approach to achieve a balanced style, and I always welcome constructive feedback.✔
Yes i felt that @@theigorsedov
Интересный подход, как я понял, суть в том, что бы избавиться от RxJS - но суть Rx не только в том что он делает асинк подписки на бродкастинг, а еще в том что у ерикса есть .pipe - > и целая куча методов в этих пайпах ... например catchError / tap / map и т.д. там штук 60, если не больше.
Получается так, что Сигналы - не могут(покрайней мере в данном виде) полностью заменить Rx ... они могут заменить лишь самые простые имплементации реактивщины, но более сложные кейсы - НЕТ .... я правильно понимаю или может я ошибаюсь ?
Спасибо за интересный комментарий.👍 Да, Вы правы в том, что RxJS - это не просто инструмент для асинхронных подписок на broadcasted events. Он также предлагает широкий набор операторов (.pipe), таких как catchError, tap, map и т.д., которые позволяют нам манипулировать и преобразовывать потоки данных.
Сигналы, напротив, представляют собой более простой и легкий в использовании подход к реактивному программированию. Они идеально подходят для простых случаев использования, когда вам нужно просто отслеживать изменения данных и обновлять UI.
Однако, когда дело доходит до более сложных сценариев, RxJS остается более мощным и гибким инструментом. Операторы RxJS позволяют нам создавать сложные потоки данных, обрабатывать ошибки, управлять параллелизмом и многое другое.
Сигналы не могут полностью заменить RxJS и предназначены для решения специфических задач, а RxJS предлагает более универсальный набор функций.
В целом, выбор между Сигналами и RxJS зависит от ваших конкретных потребностей. Если вам нужен простой и легкий в использовании подход к реактивному программированию, то Сигналы - это хороший выбор. Но если вам требуется больше мощности и гибкости, то RxJS - это более подходящий инструмент.
Помимо простоты использования, Сигналы имеют ряд других преимуществ перед RxJS:
1. Сигналы, как правило, более производительны, чем RxJS, особенно для простых случаев использования. Это связано с тем, что они используют более простую архитектуру и не требуют создания сложных графов Observable.
2. Сигналы также потребляют меньше памяти, чем RxJS. Это связано с тем, что они не требуют создания и хранения Observable, которые могут занимать много места в памяти, особенно при работе с большими потоками данных.
3. Сигналы, как правило, проще отлаживать, чем RxJS. Это связано с тем, что они имеют более простую архитектуру и генерируют меньше кода.
4. Сигналы ведут себя более предсказуемо, чем RxJS. Это связано с тем, что они имеют более простую модель поведения и меньше "подводных камней".
Сигналы также помогают уменьшить влияние Zone.js на производительность (это будет объяснено в одном из моих следующих видео).
Надеюсь я смог вам помочь!
@@theigorsedov Ухх, сильный ответ )))) Спасибо.
У вас очень хорошо получается обьяснять сложные вещи простым языком, у вас простой и понятный английский - это большой плюс..
А вы не хотели бы разобрать такую сложную тему как RxJS - я бы с удовольствием послушал, вплоне вероятно( +- 80%) что почерпну немало нового, ведь в работе используем дай боже 10% от возможностей Ерикса.
Я понимаю что это большая / сложная / комплексная тема, но с вашим подходом вы сможете слоные вещи донести простыми словами.
Спасибо.
Спасибо! 😊 Я стараюсь использовать простой английский чтобы понимание видео было доступно для всех стран.
Туториал по RxJS один из самых частых запросов и поэтому обязательно будет через несколько видео. Я сейчас заканчиваю 2 видео по новым важным темам связанным с Сигналами, затем еще будет 2-3 видео по плану на другие новые темы. Надеюсь успеть RxJS до конца лета. RxJS действительно большая тема, но теперь я могу увеличить количество времени для создания новых видео.
Параллельно я делаю большой Angular Tutorial for Beginners (10 часов).