Change Detection in Angular Pt.3 - OnPush Change Detection Strategy

[@DecodedFrontend]

Good note by @ilnurryazhapov9377. The markForCheck() is being called automatically not only when native JS events are handled (e.g. click, scroll, etc) but also happens when the output event (@Output() + EventEmitter) is handled. I had to mention that explicitly but somehow missed that :) 💡 Short Frontend Snacks, tips, and news every week here: Twitter - twitter.com/DecodedFrontend Instagram - instagram.com/decodedfrontend LinkedIn - www.linkedin.com/in/dmezhenskyi

[@gonzalocorchon6509]

Probably the best explanation I've seen so far about this topic (and I've seen a few). Really appreciate your effort and these series of videos.

[@DecodedFrontend]

Thank you for your kind words. I am glad that the video became useful :)

[@darwinwatterson1732]

Finally a very clear explanation about this topic, I understood it perfectly. Thank you for such an excellent video!

[@DecodedFrontend]

Thank you for these kind words. I am happy to hear that🙌

[@sayhellotothecat30]

很棒的讲解!!👍

[@DecodedFrontend]

Wow! Thanks so much for this support ❤️

[@deepaks7053]

Finally found the life saver one for OnPush , subscribed!

[@DecodedFrontend]

Glad to hear that! Thank you 🙌

[@nicoscarpa]

Thanks for the explanation! Angular change detection happens depth first (animations are showing breadth-first), but I got the whole idea on how the process works. Kudos

[@martinemanuel8239]

absolutely amazing exlpanation I have no words to explain how difficult was to me understand this essential topic, but now all is super clear !

[@ИванСветлов-з1я]

Best Advanced Angular tutorials in the world. Thank's to you. Bought your course about forms.

[@DecodedFrontend]

Thank you so much! I hope the course was useful 😉

[@NYProDev]

Big Thanks!

[@demidovmaxim1008]

The best channel about Angular. Thank you so much!!!

[@sergiustanciu8123]

what a legend! thank you for the detailed explanations

[@ibhargavpatel]

This is gold. I had partial understanding in bits and pieces. By showing the real angular internal implemtation, it's not just some concepts in the air. Thank you so much for this amazing content !❤

[@d4lep0ro]

This is incredibly well explained. Very good job.

[@BOATSproductions1]

Wow, amazing explanation. I like how you show the angular code. It is so helpful.

[@horic007]

A clean and indepth explanation as always 😎. Thanks!!

[@zurajeladze4440]

Really a great tour under the angular hood.

[@robertaliaj4908]

Second video of you that I’m watching, you have a great talent making things easy to understand 👌🏼

[@sviatoslavdenykevych4708]

Brilliant explanation!!! Дякую!!!

[@whatsoever6863]

real high quality content. Thanks for that :)

[@muratcanoguzhan]

Hi, at 12:48 `` should be inside GalleryComponent not AppComponenent to me. Thank you for this great explanation.

[@DecodedFrontend]

Absolutely 👍🏻 Didn’t notice this mistake 🤦🏼‍♂️

[@sanjaygarg3540]

Amazing Explanation !!

[@yevgenylevin8381]

Hi Dima 😊I bought your course Angular Forms Advanced and must to tell you that is a best course for forms and custom controls !Thanx for your awesome content

[@AmanGupta-oq6qd]

Love from India :) Very well explained!!!

[@HenrikBgelundLavstsen]

Very clean explaination. What is your thoughts on the newly released feature signals. That could be a new way of dealing with change detection as far as i know.

[@DecodedFrontend]

I have mostly positive thoughts. Signals will definitely simplify and improve the CD in Angular. It is supported to be more performant and will make onPush redundant. I have actually a video with my first impression about signals :)

[@zrowork198]

Thanks! Greatly explained 🔥

[@vutruong4164]

By far the bestest explanation on the nuances of Angular Change Detection. Honestly, Angular should just put a link to your 3-part series on their documentation page for Change Detection. I love working with Angular, but I honestly do not love its change detection story. I felt that it is a mess of "if ... then ... else" working on top of "monkey-patched" browser apis through ZoneJs. Hopefully, the Signal APIs and later on, Signal-based components will remove the above convoluted logic and ZoneJs, so that Angular change detection is more fine-grained and simpler to understand, and then async-await won't have to be down-compiled to Promise.then() anymore (because ZoneJs can't monkey-patch async-await syntax)

[@DecodedFrontend]

Thank you for such a great feedback! :) The experimental zone-less apps we will be able to see very soon 😉

[@tarasshevchuk8477]

Very interesting !

[@JM-kz7zf]

You are the best! Thanks you dude !!!!!!!!!!!!!!

[@AmarSingh-uw1db]

Gratitude❤❤, Thanks for the explanation with such a best approach.

[@vaibhavchawla2439]

In love with your content.Thank you for giving detailed explanations. 😃😃

[@julienwickramatunga7338]

Thank you for this nice series about Change Detection! Very nice examples, the components tree viz helps a lot.

[@andriideiak4323]

Great explanation with nice examples which Angular not provides in the docs!

[@mprado7]

And now without glasses, great to see you well with that, how was it? How is the new life? Hehe greetings from Argentina!

[@DecodedFrontend]

Thank you for asking :) It is amazing to see the world without the blur effect. The recovering took about a couple of weeks and now everything is ok. One of the best my decisions.

[@antoine1003]

Nice vidéo ! I always wonder when should I use OnPush or let the default detection strategy?

[@DecodedFrontend]

I personally go with onPush by default and have never had any issues ;)

[@gagiksimonyan3782]

Thanks for another useful video, Dmytro)

[@andrii_vorona]

Very cool, thanks for the video.

[@Володимир-д1щ6з]

Hi. Is there any future in current change detection mechanism in the light of signals?

[@DecodedFrontend]

Yes, Signals will improve the CD mechanism and change the algorithm of how it currently works but I don't go into this topic yet because signals are in developer preview mode and when it become stable, I will do another video about CD with signals

[@punitdixit861]

It’s really great explanation of change detection strategy. Just one query i had face issue while using on push With dev build, view updating correctly however with prod build view not updating.....thanks in advance wait your answer for same

[@aravindreddy1792]

Thanks ❤

[@artstar991]

good job mate

[@phugia963]

Great explanation. Would be perfect if you have source code demonstrates all scenarios.

[@calbofacundo8549]

what about, for example, ng template or ng if... markForCheck() is being called automarically as well?

[@Slawko1212]

Thanks for a great video! I always thought that Angular traversals components tree with an "Depth-first search" approach (HeaderComponent -> SearchComponent -> ButtonComponent -> PageComponent -> ...), but on the diagrams it shown as an "Breadth-first search" (HeaderComponent -> PageComponent -> FooterComponent -> ...). Is this just a diagram issue or Angular really works that way?

[@youknowwho4994]

Change detection cycle and Onpush are the really difficult logic to understand. But explanation is very clear and precise. Thanks for the video.

[@beshoyfayez7695]

I think you missed somthing. I Test Some Senarios with a demo app like this AppComponent has 2 child components: DashboardComponent - HomeComponent DashboardComponent (Apply onPush) and HomeComponent too. and in home component I just apply a click event to change property name in the model and it works, my question: Why DashboardComponent ngDoCheck run again? after I click button in HomeComponent? and when I check angular dev tools profiler section and I found dashboard component DoCheck run again

[@SergioUkrAr]

The Best video and explication, where did you buy this t-shirt ?, I want one 😃.

[@bin4ev]

Best one explanation I ever seen in you tube. Thank a lot! P.S cool 👕 Where can I order?

[@DecodedFrontend]

I got it as a gift from Google when became Angular GDE, so I don't think that it is in free sale...

[@jakubdrewniak2668]

hey, is this the last video from this series about change detection? if not, how many do you plan?

[@DecodedFrontend]

Hey 👋Yes, currently it is the last one. There will be update with signals but it will happen later this year.

[@pashabiceps95]

11:09 i dont understand, if all components have onPush, at what point input bindings are checked for changes?(а ты знаешь русский)

[@vladislavmalaichuk2863]

great videos seria, but not too deep for myself, because we lose important process how exactly angular understand that value change how exactly angular check old value with new one I like this channel, thanks for your videos

[@vladislavmalaichuk2863]

I remember that there is important and interesting process which I not remember exactly, so I will google the answer :)

[@geekybruce4819]

doesn't settimeout automatically call change detection ? also doesn't onpush prevent Change detection cycle in child components ? if not what is benefit of using it for performance perspective ?

[@DecodedFrontend]

Hey! Thanks for your questions. - settimeout will cause a change detection cycle for the entire view tree of the application. - yes, if the component with onPush isn't marked as dirty, then the CD won't be executed for the component view and all its children.

[@danywalls]

The new version of Decode Glass-less

[@DecodedFrontend]

Angular goes module-less and Zone-less, so I go Glass-less 😄 I follow trends so to say

[@beodan9219]

greate

[@raptorthefirst]

I agree that it's the best case scenario when all components have OnPush strategy, but I kinda wonder, wouldn't it be easier if we just disable automatic change detection as you did in the first video and then simply run detectChanges when we need 🤔 this way we won't bother all the logic and stuff with these strategies and manual flagging.... Although, how the parent components will get updated if child affects it, ok nevermind

[@alexejks8468]

the picture on the wall is hanging crookedly. not neat

[@pashabiceps95]

I think difference between view checking and binding checking was not properly explained. I still dont understand

[@chaka1530]

I have always thought that if we apply OnPush to a certain component, all of its children get OnPush strategy applied immediately.

[@DmytroMytsko-q7g]

Вітаю)Є питання,дещо не по відео,тому перепрошую,що не по темі.Я працюю на проекті(To Do List)(фронт-енд частина на Angular),який краще порадите використати компонент для відображення інфи(тасок),щоб кожен запис ,тобто таска,складалася зі ще одної своєрідної таблички.Ну і відповідно,щоб ці дані можна було підв'язати і відправити на сервер

[@rishavharsh6520]

Please try to bit louder bro

[@NikolaGolijanin-m8s]

Hi @DecodedFrontend Whould you mind creating some best practices of using onPush strategy?

[@ilnurryazhapov]

я думал что markForCheck вызывается еще и когда происходит эмит из @Output

[@DecodedFrontend]

На самом деле ты прав. Мне стоило уточнить что речь идет не только о нативных js ивентах как click, etc, но и для тех которые имитятся с помощью EventEmitter + @Output().

[@ArthurMudrick]

5:32 -- watch the pillows

[@genyklemberg]

Great, now I know how exactly markForCheck works)