New in Angular 18: Unified Control State Change Events for Forms
Вставка
- Опубліковано 16 чер 2024
- Angular 18 brings a new feature for forms called Unified Control State Change Events. In this video, I explain a powerful new feature of the framework and demonstrate how it works. Angular 18 has added six new form events to track changes in the state of forms (touched, value, status, pristine, submit and reset).
I'll teach you how to receive notifications whenever specific states in your form change, and I'll demonstrate how new events work with individual form elements (FormControl) and groups of elements (FormGroup). I'll also briefly remind you what each event means.
My videos use great visuals to simplify explanations and save time learning for viewers (both beginners and professional developers).
Timestamps
0:00 Introduction to a New Feature
0:30 The Events Property: new observable
0:43 The Subscribe Method: receive notifications about changes in forms
1:08 Subscriber Function Parameter
1:47 TouchedChange and PristineChange
2:11 ValueChange and StatusChange
2:29 The ControlEvent Class: parent and children
2:50 The AbstractControl class: FormControl and FormGroup classes
3:03 The FormGroup Class: how to work with a group?
4:00 FormSubmitted and FormReset
4:57 Don't forget about imports
The framework is growing🚀 and developing and there are still many big and small changes ahead.
ℹ️ Thanks to the @Angular Team for the valuable work.
I hope you liked my video!👍
✔️ Source: github.com/angular/angular/pu...
☕️ Donation: / igorsedov
For more tips and updates, follow me on:
▪️Twitter: / theigorsedov
▪️LinkedIn: / igorsedov
▪️Instagram: / theigorsedov
Website: igorsedov.com
Email: me@igorsedov.com
#angular #angular18
The events (new observable) allows filtering within your subscription using RxJS operators. You can subscribe to the entire stream and then use operators like filter to only include events you care about. This avoids long chains of conditions in your component logic.
Code example: igorsedov.com/s/ng-rxjs-unified.png
P.S. Thanks for the interesting question, @deadlyecho
If only more videos in tech prefer this style of explaining things with visuals/illustrations. Very good video, thanks👍
Thanks for the kind words!👍 I completely agree, visuals are fantastic for explaining tech concepts. Graphics can improve understanding and shorten learning time - that's exactly what I aim for in my videos and on this channel!
Wow, never seen such a curated polished educational video. Hats off🎉
Thank you very much!👍 I really appreciate you noticing the effort put into creating a polished and well-curated video. I try to make learning easy, enjoyable and productive (short and to the point). I value your comment, it helps the channel grow! My goal is to make learning frameworks like Angular🚀 as easy and accessible as possible.
I second that, fantastic work
Awesome, you just earned a subscriber ❤
@adriangschwend2792 Thanks so much for your positive comment! 👍 That really means a lot to hear you think my work is fantastic. I always strive to do a great job!
@mahmudadamusman8264 Thank you for your kind words and subscription! 👍♥️ This support helps the channel grow and create more videos.
These animations are so well done. Such a nice way to show an example.
Thank you!👍 I'm glad you liked the animation. My goal is to use visuals like that to make explanations clearer.💡 Stay tuned!
how do you make them?
If you are talking about graphics, then I use:
● Apple: Final Cut Pro and Motion
● Adobe: Photoshop and Illustrator (also trying Premiere Pro and After Effects)
● Various less functional tools
● I'm trying to use various process automation tools
Unfortunately, this process is slow and requires a lot of effort and time.
@@theigorsedov thank you for the answer. I wish you success with this channel/project. you deserve it
Thank you very much for your wish!
Dude, your presentation animations are sooo cool that I can follow and understand your explanations effortless. Nice !
Thank you so much!👍 I'm glad to hear that the animations helped you follow and understand the explanations effortlessly. This is the goal I strive for, spending a lot of time and effort on creating these videos. Your feedback is greatly appreciated! 😊
Another great video with great & simple explanation. Appreciate it Igor, thanks for your efforts.
I'm always glad to see you here.🤝 Thanks for watching, commenting and support.👍 I'm already working on the next video.👨💻
Thank you for putting so much effort into the visual animations. They add a flow to the video that makes it much easier to follow the information.
Thank you!👍 I'm really glad you liked the explanation brought to life with the visual animations. Visuals can be a powerful tool, making information even more understandable, intuitive, and logical. I try to ensure that every moment in the video has nothing superfluous - just to the point; this really helps make it easier to understand and more enjoyable. This is the goal of my channel.
you explained very well
Thank you!👍 I appreciate you letting me know the explanation was clear. That's what I strive for! Stay tuned for more clear and concise Angular🚀 content coming soon!
Well explained, and top notch animations! 💪
Thank you, I'm glad you liked the explanation and animation!👍 Animation helps make the explanation clearer and makes watching the video more enjoyable.
Very good and explanatory. It must take a lot of work to make this video well done and educational.
That's why it deserved a like and I'm subscribed.
Thank you so much!👍 I really appreciate you taking the time to comment and being a part of the channel! Your continued support helps me create more videos.👨💻 You're absolutely right, it does take a lot of effort, but comments like yours make it all worthwhile!
Simple explanation with cool illustrations 🙌
Thanks! I'm glad you liked the explanation!👍 Animation helps make the explanation simpler and clearer. I'm glad that I managed to achieve this goal.✔️ Stay tuned for more Angular content coming soon!
Bro keep posting bro angular videos , very useful
I'm glad you found my video useful!👍 I'm already working on a new video. Starting next month, videos will be released more often. Stay tuned! 🔜
First time seen such a creative way to present info ❤❤❤ keep doing in the same 🎉
Thank you very much!👍 I'm glad you appreciated my way of explaining and approach to creating videos.♥️ This is the goal of my channel. I'm already working on a new video. Subscribe to stay tuned for more! 🔜
Very informative, very easy to understand.
This is great to hear, thank you!👍 Making clear and easy to understand videos is a top priority.🥇 Your feedback is valuable.
Dude, this presentation style is incredibly well done and fits perfectly with Angular... it shows all the important things and and how they are connected across different parts of the code. You got a new subscriber!
Thank you so much for the detailed feedback! I truly appreciate it, and especially for subscribing! 👍 Your support helps me create more videos.
Yes, I agree with you about the style. Using animation correctly helps me explain complex concepts more easily and clearly. This is the purpose of my channel: making complex concepts simple. 🅰️ Angular is a large and complex framework, but quality videos significantly reduce entry barriers.
Very good stuff thanks ror the effort
Thanks for the positive feedback!👍 I'm glad the video was useful! Stay tuned for more content about Angular 18 coming soon!🚀
Great video! Thanks for sharing!
Thanks for watching and the positive feedback!👍 Really happy to see you subscribed.🤝 Lots more content coming your way, stay tuned!
Great video and it is even better with the animations. Thanks!
Thanks for the positive feedback!👍 I'm thrilled you enjoyed the explanation brought to life with the animations. Animation makes explanations simpler, clearer, and more enjoyable. Stay tuned for more 🅰️ Angular content coming soon!
Did form validation also become more easy with Angular 18, and if so could you explain how? :)
That's a great question!👍 There are no major changes to the validation rules in Angular 18. Stay tuned, new content will be on the channel soon.👨💻
The way you made the video presentation is so inspiring. How long did it take to make this video?
Thank you, that's very inspiring to hear!👍 I'm already working on the next one.👨💻 To answer your question, creating a video takes roughly 3-4 hours per minute of final footage (15-20 hours for this video). This doesn't include scriptwriting, voice acting, or brainstorming explanations. It's a lengthy process, but I'm happy with the outcome.🙂
Great animations and such a great material to learn in a lovely way! Just the spelling word "function" bothers me :D Hope u will improve that in next videos! Sub+ :)
Thanks for the positive comment and subscription!👍 Your support is valuable and helps the channel grow. I'm glad you liked the video and animation! Thanks for the tip.
Amazing video. Can I know what software have you used to create it?
Thank you : )
Thank you for a great compliment.👍 To create the video, I rely on a core set of tools from Apple (Final Cut Pro and Motion) and Adobe (Photoshop and Illustrator).
My workflow relies on a combination of vector and raster graphics. A significant portion still requires manual work, and I'm actively exploring automation tools and experimenting with new software to streamline the process.
In addition to the core software, I use various smaller tools depending on the specific needs of each video. I'm constantly experimenting with different approaches and tools, and for some smaller tasks, I've even tried mobile apps, though the results haven't been good.
While I use some automation tools like AppleScript, a significant portion of the process still requires manual work.🙂
@@theigorsedov thank you very much for all the info. It's an amazing work and I can imagine how much effort it requires.
I rarely comment videos but this time I couldn't do it. Great work! ❤ 💪
Thank you, I really appreciate your feedback!♥️ It is important for me to know that it is useful and achieves its goal.
Yes, I feel every minute and every second of the video. 💪 😊
Wouldn't this introduce a code smell since I have to have these If statments ? I think it would have been better if the events are separated, right ?
Thanks for the interesting question.👍⬇️
➡️ I wrote a code example for you: igorsedov.com/s/ng-rxjs-unified.png
ℹ️ The new observable allows filtering within your subscription using RxJS operators. You can subscribe to the entire stream and then use operators like filter to only include events you care about. This avoids long chains of conditions in your component logic.
❓ As far as I understand from the request for a new feature described on the page, the reasons were the following:
● Flexibility. A single observable gives more flexibility.
● Reduced API bloat. Having a separate observable for each state change would significantly increase the complexity of the API.
● Improved maintainability. A single observable simplifies maintenance and reduces the risk of introducing issues.
New feature request page: github.com/angular/angular/issues/10887
@@theigorsedov Thanks for responding 😄 great I will check it out, keep up the good content 👍 💥
I'm already working on a new video.👨💻😊 I'm also thinking of making a short video about event filtering.
@@theigorsedov Yeah, it would be a great idea.. especially if you addressed the case where you need to subscribe to multiple events and each subscription handle a different type and consequently each will have for example a class as handler for each event type... handlers could be services injected from a parent component to control the desired behaviour, or use a default handler instantied inside the child component itself.. but that might be too much 😅
Yes, the number of combinations and variations can be overwhelming.😊 I will create UA-cam Short demonstrating the basic principle of filtering by event. I'll also show how to filter by event value, like status. This will be accompanied by a post in community and on social media.
Do we need to unsubscribe the event subscriptions?
Thanks for the interesting question! Unsubscribing from events in Angular isn't strictly required, but it's considered good practice in certain scenarios. For example, unsubscribing can help avoid memory leaks and improve performance when dealing with a large number of subscriptions.
Шикарный туториял. Игорь, а можно ли подписываться не в ngOnInit, а в боди конструктора?
Спасибо большое за добрые слова!👍 Да, конечно можно и в конструкторе и в методах. Везде где вы можете "дотянуться" до формы. ngOnInit я использовал просто для примера.
Вот примеры с конструктором и методом.
Конструктор:
drive.google.com/file/d/1V5INfNVCSVkNwz36LQ1ASBg9BR1UZVJG/view?usp=sharing
Метод:
drive.google.com/file/d/1t27zk8T5yZbKzDh3y0PnwfajFspOcCbw/view?usp=sharing