From Beginner to Pro: Demystifying Angular Change Detection in Depth

► 🔥 Get my Advanced Courses Here ➡️ monsterlessons-academy.com/co...
In this video, you will learn Angular change detection in depth. Learn how it works and understand key concepts such as "mark for check" and the differences between `detectChanges` and `markForCheck`. We'll also explore how components are marked as dirty, the role of async pipes in change detection, and the advanced topics of using signals and zoneless setups. Whether you're new to Angular or looking to deepen your knowledge, this video has you covered!
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
0:54 Why Zone.js?
4:29 Mark dirty
6:51 Async pipe
7:51 Marking ancestors
8:28 Detect changes vs mark for check
8:57 Angular Signals
11:31 Angular zoneless
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

[@MonsterlessonsAcademy]

WATCH NEXT: Change Detection in Angular - You Project Is 20x Slower! - th-cam.com/video/-tB-QDrPmuI/w-d-xo.htmlsi=5gUSAOyRNb377oF6

[@enverusta7811]

Your contents are amazing, please keep on!

[@MonsterlessonsAcademy]

Thanks, will do!

[@anthonypark9158]

I'm so glad I ran into a Reddit comment that led me here. I've been writing Angular 10 close to 2 years and still haven't had clear understanding on CD, Zone.js, and OnPush. I'm excited for the changes to latest Angular.

[@MonsterlessonsAcademy]

That's awesome!

[@ashutoshbhardwaj9801]

Great video and great document that you followed,

[@MonsterlessonsAcademy]

Glad you enjoyed it

[@deadlyecho]

Great video ❤

[@MonsterlessonsAcademy]

Glad you liked it!!

[@xxRAP13Rxx]

Thank you so much for this video! I subscribed. I did have two questions:
1. at timestamp 6:30, we see that the rightmost component with a shield updates its immediate left child even though that left child is NOT marked dirty. Is that because as you say, "when our parent component is updated, we also update all children". So any child component of an updated parent component will get updated UNLESS... that child component uses onPush change detection strategy AND that child is NOT marked dirty?
2. at timestamp 8:30, were you ultimately saying that using async pipe within our HTML is more time efficient than changing data fields within the component classes stored within our .ts files?

[@MonsterlessonsAcademy]

1. Angular updates all components every time when they or their parents don't have onPush
2. I didn't say that. It compares detectChanges vs markForCheck. First if immediate force detect which second does marking dirty which leads to the detect changes when onMicrotaskEmpty is finished. As you can see async pipe just do markForCheck.

[@vladwolf444]

Is there similar material on working with DI in Angular?

[@MonsterlessonsAcademy]

I don't know any