Understand Angular Signals in 20 Minutes
Вставка
- Опубліковано 15 чер 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/guide/signals
☕️ 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!
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!🔜
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!
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!
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!👍
Как хорошо что ты есть!
задолбался объяснять, теперь просто показываю джунам твои видео - и всем всё становится понятно 😂
Спасибо за отличный комментарий и добрые слова! 👍 Рад это слышать! Это лучшая оценка и это именно то к чему я стремлюсь.😊
Soclear with animation 💙
Thanks for the comment.👍 I appreciate you noticing the animation - graphics really help me explain things more clearly, simply and quickly.
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.
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.
Спасибо большое за труд, понятно и наглядно объясняешь) побольше бы таких видео
Спасибо за комментарий! 👍 Мне приятно, что видео нравится и приносит пользу! Стараюсь делать понятные видео с логичными и легкими объяснениями, чтобы изучение Angular было более простым и быстрым (и графика в этом помогает, хотя и требует много времени на создание).
Видео будет становится все больше. Со следующего месяца частота выпуска новых видео увеличится. 📈 Сейчас я сконцентрирован на выпуске видео о новых функциях Angular 18🚀, но в следующем месяце будет продолжение Angular Signals с новым из 17.1-17.2 версий и другие темы.
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!
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. 🔜
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!🔜
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!👨💻
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!
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 UA-cam.🔝🏆
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.👨💻
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! ▶️
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!
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! 🔜
Игор спасибо болшое! Очень информативное видео!
Спасибо за комментарий!👍 Я рад что мои объяснения помогают!
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.
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.
Игорь, спасибо за такое подробное и наглядное объяснение. Анимация впечатляет. Единственное, чего не хватило в видео, это какие-то примеры использования сигналов. Я правильно понял, что сигналы будут удобны для создания страниц со сложным и запутанным состоянием? И, если не секрет, сколько ушло человеко-часов на монтаж такого видео?)
Спасибо за комментарий и подробный отзыв!👍 Рад что видео и анимация понравилась! Про примеры использования понял, спасибо. Да, в большей степени сигналы полезны при создании страниц с большим количеством взаимосвязанных данных (сложные формы, dashboards, визуализация данных). Сигналы помогают организовать код и упростить его обслуживание. Например, форма которая зависит от запросов к API и данные из ответов также влияют на другие части интерфейса. Сигналы предлагают структурированный и предсказуемый способ управления этими взаимосвязанными точками данных. Они позволяют вам определить, как работают зависимости данных и как компоненты реагируют на изменения.
Одна из первоначальных целей сигналов была помощь в будущем в отказе от использования zone.js. Но на данный момент, команда Angular нашла способ как уйти от zone.js без использования сигналов. Об этом у меня будет отдельное видео (в Angular 18 был сделан первый небольшой экспериментальный шаг).
Возможно в будущем сигналы появятся в JavaScript: github.com/tc39/proposal-signals
По поводу времени, которое ушло на создание видео - я даже не знаю😊 Примерно уходит 3-4 часа на одну минуту видео. Примерно получается 60-80 часов, но скорее всего больше из-за того, что я часто что-то переделываю (идеи приходят в процессе). Я думаю не менее 100 часов.
@@theigorsedov Как идея нового видео. Можно взять какую-нибудь осмысленную сложную и взаимосвязанную страницу и наглядно показать как это делалось раньше и как это теперь можно сделать с новинками 17-ой и 18-ой версий. Это будет хорошим подведением итогов, после того как вы закончите цикл с новинками в Ангуляре.
Спасибо за идею.💡 Вы говорите о практическом видео - я думаю о таких видео, но немного в будущем. Также я думаю о стримах с вопросами в чате и разборами кода, но это в будущем. Более ближайшее - я скоро начну использовать комьюнити на UA-cam (первично) и LinkedIn/Twitter для советов, практики, Q&A и подобного.💬 Сейчас моя цель - это создание видео с упором на объяснение концепций или новых функций. Я хочу чтобы канал в итоге стал большим туториалом от А до Я. С июня у меня будет все больше времени для создания видео и количество видео и, соответственно, частота их выпуска будет расти. В ближайшем плане еще два видео о Signals (новые фичи в 17.1 и 17.2).
Я также хочу объяснить несколько паттернов, которые реализованы в Angular и полезны для понимания как Angular работает "под капотом". Обычно понимание паттернов является сложным из-за их абстрактности в теории и сложности охвата в практике.
С ростом аудитории канала я смогу дойти и до практических видео о которых вы говорите. Эти видео будет немного быстрее создавать.
@@theigorsedov Успехов вам в начинаниях!
Спасибо большое!
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.😊
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.
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
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.
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.
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.
@@arberstudio 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