Change Detection in Angular - Pt.1 View Checking
Vložit
- čas přidán 27. 07. 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
So good explanation of the Change Detection mechanism!
Watching all of your videos. You have improved my career so much bro, many thanks...🙏
Awesome ! Finally a video explaining simply how anguar does change detection. I was looking fo this for a long time !
Extremely high quality comprehensive explanation video ! Thank you Dmytro for your work!
Just one more amazing stuff. As always. Thanks Dmytro!
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 🙌🏻
Thank you very much Dmytro, it's a really interesting topic, can't wait for the following videos!
Concepts Indepth❤
Love from India..
you have become in the authorize voice in topics related to the angular world, in my personal perception
Such an amazing professional, thanks for enriching the Angular world and making complex content accessible!
Can you please do entire angular course
💸Take my money Dmytro 💸
Thank you in advance
Thank you! Super interesting as always
This is insane video for the curious dev out there, thank you
Very useful video, yesterday i was searching about this subject.
Fantastic video as usual. Thanks
Thank you!
This was great! Thank you!
Very clear explanation, thx.
Amazing content! Thank you so much
Thank you! Nice content is always!
Thanks for another useful video, Dmytro )
Amazing, thanks
Thank you for such a great video....!!!👍
Thank you, Dmytro!
Request to upload more such content
will be done ;)
Great video
Thanks!
great content.
well done!
Thanks
I just want to say, i love you ❤
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 ❤❤
Hello, Dmitry ✋Do you have any plans to make a series of videos about unit testing in Angular?
Thank you for your content! BTW do you know/can recommend or maybe you have some crash course about angular?
Thank for sharing your knowledge.
at 12:06 changeDetectorRef is base class of ViewRef and not the implementation.
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.
Дякую за відео!
Main reason to select 1 long video in poll was because now I will have to wait for other two videos.😥
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 🙂
Really love your work, Dmytro. may I ask where I can get the internal code of angular for learning purposes? thanks
Дякую за відео :)
Дякую за коментар 😉
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.
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?
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.
Hello, what are your views about Angular 17 vs React? Which one is more better taking general things into consideration.
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
Can you also share or make video on deploying of angular via CI/CD with User of ESLINT & Testing framework in cloud
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.
Агонь)
🔥
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)
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)
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.
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)
*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