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

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

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.

Finally found the life saver one for OnPush , subscribed!

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

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

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

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

Really a great tour under the angular hood.

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

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

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

Love from India :) Very well explained!!!

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

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

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

real high quality content. Thanks for that :)

This is incredibly well explained. Very good job.

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

Big Thanks!

Amazing Explanation !!

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)

Thanks! Greatly explained 🔥

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

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

Very interesting !

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

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

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

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

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.

Thanks for another useful video, Dmytro)

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

很棒的讲解!!👍

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

Very cool, thanks for the video.

Thanks ❤

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

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

good job mate

The new version of Decode Glass-less

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

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

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

greate

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

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?

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

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

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 ?

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

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

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

Great, now I know how exactly markForCheck works)

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

the picture on the wall is hanging crookedly. not neat

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

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

Please try to bit louder bro

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

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

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

5:32 -- watch the pillows