Change Detection, Immutability, OnPush Strategy in Angular (Tutorial)

With live code, let's understand how change detection works in Angular, what is immutability and how we can leverage onPush strategy.
With the advent of Redux, immutable update patterns have become widely popular. In a nutshell, the idea is to create a new object instead of altering the existing one when you need to perform an update action. When it comes to Angular applications, the immutability term is mostly mentioned when you deal with the OnPush change detection strategy in order to improve a runtime performance.
However, sticking to mutable update patterns may not only prevent you from taking advantage of narrowing a components tree subjected to the change detection process, but it also leads to some hard to spot bugs/gotchas.
Please like, share and subscribe for more content like this. You can follow me and directly ask questions on:
Groups and Pages:
Reddit Community: / theangularcoder
LinkedIn Group: / 13984152
Facebook Page: / theangularcoder
Discord Community: / discord
Personal:
Reddit: / gouravgunjan
Discord username: gouravgunjan#3168
Dev.to: dev.to/gourav_gunjan
LinkedIn Personal: / gouravgunjan
=== Chapters ===
00:00 - Intro
00:50 - Change Detection (layman)
03:18 - Immutability
04:33 - Live Code - Bad example
10:30 - What happens with OnPush
12:21 - Fixing code for OnPush
14:12 - Fix for initial bug
15:59 - Conclusion

[@jyk6107]

Another great tutorial, Thanks!

[@GouravGunjan]

My pleasure!

[@saikumardesu1700]

Yeah, I was not comfort with this changing of object sub properties, thanks for explaining the onPush.

[@GouravGunjan]

No worries!

[@satisharyan49]

nice edit

[@GouravGunjan]

Thank you!

[@VK-sn3sn]

in your opinion, which is the best considering general aspects. React or Angular?

[@MultiWarrr]

Super like

[@subha123007]

what vscode plugin you are using for detecting git status.

[@GouravGunjan]

GitLens.

[@sabarinathan3297]

Hi Actually we have application with around 30 modules with lazy loading , but whenever we edit any components it is taking 3minutes for every compilation. Do you have any idea about the issue? Spec: 8GB RAM, SSD ,I5 10th

[@GouravGunjan]

I had same issue with my windows laptop. I switched to mac. Now the compile time is less than 30 secs. I tried increasing RAM, and other stuff to improve performance. But that was not resulting good. If you have 30 components, maybe you should break down application into smaller ones and publish them to artifactory (like npm). You can then resolve the dependency mein main app via package.json This is micro front end architecture. I hope that would reduce the compile time

[@sabarinathan3297]

@@GouravGunjan Thanks for the suggestion

[@nallaparajuamareshvarma8471]

Can you also provide the Code in the description plz

[@GouravGunjan]

Since this was purely based on tutorial. I placed the link to tutorial in the link. The idea is to get it done yourself once.

[@swathitandle6720]

why are you mentioning '?' before employee ""employee?''' in child component