Change Detection in Angular - You Project Is 20x Slower!

Learn change detection in Angular and improve performance of your Angular application. By default Angular check all properties in all components in every change detection cycle this is why it is extremely slow. You will learn how to optimize performance by using OnPush.

TIMESTAMPS
0:00 Introduction
0:54 Component rendering in Angular
2:34 Change detection in Angular
7:16 Input change in OnPush
10:23 Event change in OnPush
11:43 Streams change in OnPush

FOLLOW ME

REFERENCES

RECOMMENDED VIDEOS

MY COURSES

[andrewkolansky]

I've been doing Angular for 7 years and learned a lot from this video. There is just so much to know when it comes to Angular.

[metric]

It's good that you pointed out "OnPush" as a change detection strategy but the issue here is calling a function in the middle of your template. You should only use functions when reacting to a DOM event like a button click or emit from another component. Pipes should be used in place of functions in a template to cache the result and only runs once.

[brianhuang]

Simple and easy to understand! Gonna have to go through your channel and learn more, thanks!

[sanjvij]

a very good video. I worked on angular for 2 years and somehow didn't knew about this issue until I started facing the slowness on one of the pages. Luckily we used clear subscription model on all pages with a central state so we didn't had much trouble with using change detection on push for main pages. Thanks this was great !

[josephmbimbi]

Thanks for the video, I'm a backend dev who is getting started in frontend dev, i did a bit of vanilla JS back in like 2013, but i figured i may as well jump right into Angular. I was pulling my hair and getting very frustrated with the UI not updating, backend unexpectedly being called multiple times. The barrier to entry to do proper dev is higher than i expected, like any framework, it hides a bunch of complexity, but the intrinsic complexity just cannot vanish. However I understand that when you grok it, you get much more done than using vanilla JS or TS.

[radvilardian]

Thank God finally I found channel who is good in Angular, and write code using Vim. I ma hit that bell so hard

[igork]

Change detection in Angular highly optimized and for the most apps it is not necessary to use OnPush, unless you have a very lot of components simultaneously on one page. And again, when Angular runs change detection - it's just about checking objects in memory, not re-renrdering, so in most cases it really fast (1-2 ms). Rendering process in browser will be run only if something changed.
Using OnPush require you to waste more time while developing. You have to use immutable objects, run change detection manually when you need. It's not so hard, but it is extra job. So, for many projects, this is a premature optimization, which is a bad practice.

[wolfisraging]

Dude you're videos are gold. I've learned so much from them. Thanks a lot from the bottom of my heart! And plz keep making more :)

[kumarb.]

Thank you so much for this! I'm new to Angular and this video helped me quickly resolve a bug I've been working since 2 days. Cheers to you!

[Elyrinnnn]

great video! what I was missing is what happens if you subscribe without async pipe. one could mention that you have to inject "ChangeDetectorRef" and call its "markForCheck()" to mimic the behaviour of the async pipe. Also I find Angulars name "OnPush" a bit confusing. if i'm not mistaken it does not affect the amount of change detection runs. But it can make each run more light weight by telling angular: "hey, you can skip my component and its children in your current cd-cycle". That you have proven in your example where ngzone events still trigger CD despite OnPush. Awesome Content <3

[tuku_mann]

The best and thorough explanation of the change detection, thank a lot!

[dhaneshdhanawade]

I love your channel when I watch your videos I learn new things every time.

[returncode]

Amazing content. I finally understood change detection. Thanks so much!

[slowmoshotsPZ]

Crisp and Clear Explaination! Thank You

[tigranharutyunyan]

That is why Computed properties in Vue are so valuable

[JoshDeveloper]

Yaaay, I found non-indian guy's video about change-detection.... :D

[simonneubauer]

Super video, thank you very much !!! Especially the part with OnPush and the trick with the "checkRender"-Method, i found no other tutorial / answer on stackoverflow, because with OnPush, the ngDoCheck lifecycle hook is still called, but the html is not rendered again, if there is no change. Furthermore i finally understood the ...-spread operator, and the importance of immutability.

[CharliesName]

Did some changes to a app that handles 5 editable tables simultaneously. Changed most components to OnPush and changed function calls to pipes or in some cases to a precalculated value in vm, it was a massive performance upgrade. Previously it had a function that change style of each editable cell which was called 3500 times every time anything changed with a table of only 30 rows! Now it's barely called at all.

What i didn't know from this video is that async work with OnPush! Will be looking into using that more. Thanks for a awesome video!

[robaudenaerde]

Thanks. Very nice, clean and clear explanation!

[reenezden]

You are really good at explaining. Keep up with the good work