From Good to Great: Optimizing Angular Performance

► 🔥 Get my Advanced Courses Here ➡️ monsterlessons-academy.com/co...
In this video, we delve into optimizing Angular performance by examining how components are rendered and how often. Learn the impact of OnPush change detection strategy and the Track By function on your app's efficiency. We also highlight common pitfalls to avoid. Perfect for Angular developers aiming to boost their application's performance!
This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.
LOOKING FOR THE VIDEO EDITOR? ➡️ [e-mail]
SERVICES THAT I'M USING
Backblaze unlimited cloud backup ➡️ www.backblaze.com/cloud-backu...
Free 1 Month Skillshare Membership ➡️ skillshare.eqcm.net/c/5473521...
STUFF I USE
► My imac for home on Amazon - amzn.to/4aLbTBu
► Mac macbook to go on Amazon - amzn.to/4bRVD2m
► My monitors on Amazon - amzn.to/3yEafUQ
► My mouse on Amazon - amzn.to/4ayzXHn
► My keyboard on Amazon - amzn.to/3KkyGZQ
► My monitor arm on Amazon - amzn.to/3wRKvDM
► My speakers on Amazon - amzn.to/44WPWht
► My coffee machine on Amazon - amzn.to/3KjajvH
► My Synology NAS on Amazon - amzn.to/4bWZX0u
► My Seagate IronWolf 4TB HDD on Amazon - amzn.to/3KjyA4F
► My external SSD drive on Amazon - amzn.to/3Kko5hG
► My external HDD drive on Amazon - amzn.to/44WQ3tp
► My microphone - amzn.to/45191iD
► Audio interface - amzn.to/4axuoJq
► Camera - amzn.to/3yMSH8M
TIMESTAMPS
0:00 Introduction
1:53 Mutating an object
2:52 Does onPush help?
3:33 Does trackBy help?
4:53 Trackby + RxJS
5:29 It is broken now
MOST POPULAR COURSES
► Javascript interview questions ➡️ monsterlessons-academy.com/co...
► Typescript interview questions ➡️ monsterlessons-academy.com/co...
► React interview questions ➡️ monsterlessons-academy.com/co...
► Angular Interview Questions ➡️ monsterlessons-academy.com/co...
► Angular Testing ➡️ monsterlessons-academy.com/co...
► React Testing ➡️ monsterlessons-academy.com/co...
► Building real project with Angular + NgRx ➡️ monsterlessons-academy.com/co...
► Building real NestJS API ➡️ monsterlessons-academy.com/co...
► Building real fullstack project ➡️ monsterlessons-academy.com/co...
CONNECT WITH ME!
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...

[@MonsterlessonsAcademy]

WATCH NEXT: Change Detection in Angular - You Project Is 20x Slower! - czcams.com/video/-tB-QDrPmuI/video.htmlsi=ohe2O1_-nPxAZ_57

[@07bakabaka]

Amazing, good job.

[@enverusta7811]

Thank you so much, it was really helpful

[@MonsterlessonsAcademy]

Glad it helped!

[@ChessPuzzlesVideo]

Well explained. But in real-time application, we pass object to child component because we need to access multiple properties of that object.

[@MonsterlessonsAcademy]

Sure. Which works just fine until you get to the point where performance is really important and you want to avoid renders.

[@Marshall86MT]

Which strategy would you use in this case? ​@@MonsterlessonsAcademy

[@yufgyug3735]

important tips, however worth noting that angular 17 (i think) introduced new template syntax with required track by, which makes this obsolete

[@MonsterlessonsAcademy]

It doesn't make this obsolete. All same rules are applied to @for in control flow. track by by index can be bad, passing inputs as objects rerenders a child, etc.

[@adriantworek1057]

Great stuff as always! Any chance you will drop Analog.js crash course in the future?

[@MonsterlessonsAcademy]

I will add it to the list of ideas

[@Edgars82]

using new @for syntax flow Angular enforces to use trackBy as it is required and if someone starts learning Angular it should do it with latest version so this should not be an issue.

[@MonsterlessonsAcademy]

It doesn't make this obsolete. All same rules are applied to @for in control flow. track by by index can be bad, passing inputs as objects rerenders a child, etc.

[@izacaqsha3480]

How about the new "for" In angular v18, do we need to optimize it too in some kind of way like trackby?

[@Brendan2Alexander]

Trackby is required in v18

[@MonsterlessonsAcademy]

You mean @for control flow in html? It is there starting from Angular 17 and all same rules are applied there as well as trackby.

[@izacaqsha3480]

@@MonsterlessonsAcademy yes sir, I see, thanks

[@Doktornikita]

THX BRO!

[@MonsterlessonsAcademy]

Any time!

[@oleksiipopov5143]

thank you

[@MonsterlessonsAcademy]

You're welcome

[@Brendan2Alexander]

Really helpful thank u! Please don’t start a channel about making ice cream, because I will become so fat!😂

[@MonsterlessonsAcademy]

Lol. I would consider that.