Change Detection in Angular - Pt.1 View Checking
Вставка
- Опубліковано 19 чер 2024
- 💥 Become a PRO with my in-depth Angular Forms Course💥
🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-disc...
This video is the first one in a video series that describes the Change Detection process in Angular and shows how everything works under the hood. In this video, we will focus more on the View Checking process and learn how Angular synchronizes the component views with corresponding data models (classes). I hope you will learn a lot from this video.
🕒 Time Codes:
00:00:00 - Intro;
00:01:47 - High-Level overview of View Checking process;
00:07:56 - Promo: Advanced Angular Forms course;
00:09:41 - Deep Dive into View Checking process;
00:16:57 - Outro;
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi
Can you please do entire angular course
💸Take my money Dmytro 💸
Just one more amazing stuff. As always. Thanks Dmytro!
Awesome ! Finally a video explaining simply how anguar does change detection. I was looking fo this for a long time !
Thank you very much Dmytro, it's a really interesting topic, can't wait for the following videos!
Extremely high quality comprehensive explanation video ! Thank you Dmytro for your work!
This was great! Thank you!
This is insane video for the curious dev out there, thank you
Thank you! Super interesting as always
Amazing content! Thank you so much
Very useful video, yesterday i was searching about this subject.
Very clear explanation, thx.
Such an amazing professional, thanks for enriching the Angular world and making complex content accessible!
Thank you! Nice content is always!
Thank you in advance
Concepts Indepth❤
Love from India..
This is extremely cool stuff, Dmytro! These internals help you understand how the framework does the job, and this really helps with creating apps. Looking forward to the next series!
Thank you! I am glad that you like it 🙌🏻
you have become in the authorize voice in topics related to the angular world, in my personal perception
Thanks for another useful video, Dmytro )
Thank you for such a great video....!!!👍
Amazing, thanks
Fantastic video as usual. Thanks
Thank you!
Thank you for your content! BTW do you know/can recommend or maybe you have some crash course about angular?
Thank you, Dmytro!
Hello, Dmitry ✋Do you have any plans to make a series of videos about unit testing in Angular?
Great video
great content.
Really love your work, Dmytro. may I ask where I can get the internal code of angular for learning purposes? thanks
Thanks!
well done!
Thank for sharing your knowledge.
at 12:06 changeDetectorRef is base class of ViewRef and not the implementation.
Thanks
Request to upload more such content
will be done ;)
Recently took your Angular Forms Course, It was just amazing, learned a lot of cool stuff, This one is also amazing !
Thank you so much🙏 I am so happy to hear that you liked it 🙌
hello, can you please share with me. I am ready to give you half amount.
Gratitude ❤❤
Дякую за відео!
hi Dmytro, would you suggest any best starter kit with all handy 3rd party libraries(to make development cleaner and efficient) , which I can use to create my future projects in angular.
Hello, what are your views about Angular 17 vs React? Which one is more better taking general things into consideration.
Can you also share or make video on deploying of angular via CI/CD with User of ESLINT & Testing framework in cloud
Дякую за відео :)
Дякую за коментар 😉
Is there like a way to invoke change detection? Sometime some event are not happening because of timing issue, so to resolve the issue I use setTimeout to deferred setting of a value the would invoke an event.
I want to thank you for the detailed explanation
And I have a small question
When I navigate through the core code I found it written as mjs, so I want to ask you how can I open the TS files like video?!
Thanks again
Sorry if I missed something, but does Angular rebind everything when you call cdr.detecthChanges() or only where it detects a change? For example, if you have and then a lot of binding to the myObject properties, does Angular rebind all of these properties even if the reference to myObject hasn't changed?
I think re-binding isn't actually the correct word to describe this process. I would name it "binding checking". And yes, when you call detectChanges, Angular goes through each binding and checks if the current binding value !== previous value and if it has changed then the view will be updated for that part. Angular would need to do a binding check for the view created by ngIf as well (at least because the same reference to the object doesn't mean that the value of object properties remains the same because that object could be just mutated)
Do you have subtitles for your course?
Currently, there are no subtitles but I plan to do that because some other people asked about it too.
I don't like that Angular checks all child components when I run detectChanges() on the parent component. As a dev I should know already if I need to run a view checking in the child components or not. Maybe I just have a simple title from "Loading" to "Item 123" in the parent component (async). Do you have some opinions about how to use here this view checking the right way based on Angular's current design?
what is the difference between enabling ngZone and injecting ChangeDetectorRef in app root ?
With ZoneJs enabled you don't need to inject ChangeDetectorRef and call detectChanges() manually because zonejs will do it automatically for you. In the next video on Tuesday, I will be talking about exactly about that 🙂
Can we use some function to render app-any-component if we have change detection on push and inputs are not changing?
You can use functions in the template unless you have expensive computations in that functions. (e.g using loops inside, etc)
Main reason to select 1 long video in poll was because now I will have to wait for other two videos.😥
Агонь)
🔥
Hello,
I have a large formGroup in parent component and passed to multiple nested child components. So can this hamper performance?? As currently it takes more than 3 seconds after click just to show its UI on page.
When I load the parent's page, the logic is such that it navigates to default child route, and in that child, it again navigate to another child causing 3 layers of routing.
I have ised this pattern from 1 year now since the project started. Now it is impossible to revert it.
Change detection will change as part of signals RFC
So, the the automatic view checking still happens, after using 'noop', but happens only once, during initialization?
Hi! Yes, it is the so-called initial CD cycle. After that, you are responsible for running the CD (if noop zone is used)
99$ is a lot of money for students in 3rd world country. Please have something like limited time offer where you drop the price. It will be helpful for us.
Hi Robin,
You can always request a discount writing me an email from your student email at dmytro@decodedfrontend.io
However, you should keep in mind that the target group for the course are middle/senior Angular developers and if you are student and have no or very little experience with Angular then the course might be not the best option for you.
*why don't you create Angular under the hood and break down everything like this. like the course for Tony JavaScript the weird parts*
*I'm sure many will appreciate and purchase such course*
Thanks. I would expect for simplified version(shortened all in one version) of change detection theme also :). Слава Україні!
Heroyam slava! In the next video I will do the connection with the view checking, so you will be able to see the whole picture ;)
hello i want to buy your complete angular course and your advanced angular form concept is included in that course.please respond can i get discount in that full course please provide your email i so can communicate with you
Hi,
I already answered you :) please check your email