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

💥 Become a PRO with my in-depth Angular Forms Course💥
🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-disc...
Welcome back to my video series on Change Detection in Angular! In this third video, we'll learn what is OnPush change detection strategy and how you can use it to improve the performance of your angular applications. If you liked the video please share it with your colleagues and leave comments on this video ;)
Previous video about View Chacking (Change Detection)
👉 • Change Detection in An...
🕒 Time Codes:
00:00:00 - Intro;
00:00:50 - Recap of the previous video;
00:01:35 - What is the OnPush strategy;
00:02:29 - about markForCheck() and dirty components;
00:08:14 - Different scenarios with the onPush strategy;
00:14:15 - Become PRO in Angular Forms;
00:16:14 - Outro;
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi

[@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 :)

[@horic007]

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

[@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🙌

[@andrii_vorona]

Very cool, thanks for the video.

[@sanjaygarg3540]

Amazing Explanation !!

[@d4lep0ro]

This is incredibly well explained. Very good job.

[@zrowork198]

Thanks! Greatly explained 🔥

[@NYProDev]

Big Thanks!

[@zurajeladze4440]

Really a great tour under the angular hood.

[@whatsoever6863]

real high quality content. Thanks for that :)

[@JM-kz7zf]

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

[@tarasshevchuk8477]

Very interesting !

[@sviatoslavdenykevych4708]

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

[@demidovmaxim1008]

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

[@julienwickramatunga7338]

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

[@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 !❤

[@andriideiak4323]

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

[@gagiksimonyan3782]

Thanks for another useful video, Dmytro)

[@BOATSproductions1]

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

[@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 !

[@vaibhavchawla2439]

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

[@AmanGupta-oq6qd]

Love from India :) Very well explained!!!

[@aravindreddy1792]

Thanks ❤

[@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

[@artstar991]

good job mate

[@robertaliaj4908]

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

[@AmarSingh-uw1db]

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

[@sayhellotothecat30]

很棒的讲解!!👍

[@DecodedFrontend]

Wow! Thanks so much for this support ❤️

[@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

[@user-yg3sh3zw7q]

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 😉

[@beodan9219]

greate

[@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

[@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 :)

[@phugia963]

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

[@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...

[@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 😉

[@SergioUkrAr]

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

[@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 ;)

[@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?

[@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 🤦🏼‍♂️

[@calbofacundo8549]

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

[@user-ki3no7in5k]

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

[@youknowwho4994]

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

[@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 :)

[@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

[@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

[@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

[@orzohar3483]

on scenario number 6, what triggered zone.js? an async operation like (click) or the emit to the async pipe itself? (does emission of async pipe itself and @input change trigger tick() as well? or they just markForCheck for next CD cycle ). thanks!

[@DecodedFrontend]

Hey :) one of the triggers that kick off the Change Detection is the Http calls and in scenario 6 it was exactly the case :)

[@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.

[@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.

[@alexejks8468]

the picture on the wall is hanging crookedly. not neat

[@chaka1530]

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

[@pashabiceps95]

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

[@pashabiceps95]

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

[@user-om3jb7me9v]

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

[@rishavharsh6520]

Please try to bit louder bro

[@user-tb3js1zh1l]

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

[@genyklemberg]

Great, now I know how exactly markForCheck works)

[@ilnurryazhapov9377]

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

[@DecodedFrontend]

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

[@ArthurMudrick]

5:32 -- watch the pillows