Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Change Detection - Deep Dive
Search
Rainer Hahnekamp
February 29, 2024
Technology
0
230
Change Detection - Deep Dive
Rainer Hahnekamp
February 29, 2024
Tweet
Share
More Decks by Rainer Hahnekamp
See All by Rainer Hahnekamp
Next Generation Angular
rainerhahnekamp
0
7
2025-09-05_Hold_the_Line.pdf
rainerhahnekamp
0
120
Test Fest | Angular Unit Tests Distilled
rainerhahnekamp
0
420
Micro Frontends: Necessity, Implementation, and Challenges
rainerhahnekamp
2
900
Software richtig testen - Ganz praktisch!
rainerhahnekamp
0
130
Quality with Angular: Tools and Processes
rainerhahnekamp
0
400
Evolving Architecture
rainerhahnekamp
3
410
Microfrontends: Necessities - Implementations - Challenges
rainerhahnekamp
0
210
Zoneless Testing
rainerhahnekamp
0
260
Other Decks in Technology
See All in Technology
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
440
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
990
ソースを読むプロセスの例
sat
PRO
15
9.3k
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
610
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
130
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.5k
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
visional_engineering_and_design
1
160
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
130
CoRL 2025 Survey
harukiabe
1
220
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
320
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
170
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
A Tale of Four Properties
chriscoyier
161
23k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Code Review Best Practice
trishagee
72
19k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Building Adaptive Systems
keathley
44
2.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
910
A better future with KSS
kneath
239
18k
Being A Developer After 40
akosma
91
590k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Transcript
RainerHahnekamp Deep Dive Change Detection Rainer Hahnekamp - 29. February
2024 - ngOslo
RainerHahnekamp About Me... Professional NgRx https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff •
Rainer Hahnekamp ANGULARarchitects.io • Developer / Trainer / Speaker Modern Spring for Angular @RainerHahnekamp
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Component Tree Web Application Submit Cancel Change Detection
RainerHahnekamp Triggers for Change Detection Handled DOM Events Asynchronous Tasks
RainerHahnekamp 1. Change Detection with Default Strategy = OnPush =
Default 1. Waiting for Events 3. Dirty Marking 4. Change Detection zone.js 2. Event Happens
RainerHahnekamp Change Detection: OnPush • Only checks if Component is
dirty • No dirty marking by asynchronous task!
RainerHahnekamp 2. Change Detection: Click Event in Default Component =
OnPush = Default 1. Waiting for Events 3. Dirty Marking 4. Change Detection zone.js 2. Event Happens
RainerHahnekamp 3. Change Detection: Click Event in OnPush Component =
OnPush = Default 1. Waiting for Events 3. Dirty Marking 2. Event Happens 4. Change Detection zone.js
RainerHahnekamp Criteria markForCheck Immutable Property Binding Handled DOM Events async
Pipe Signal Change (Local Change Detection) manually via markForCheck
RainerHahnekamp 4. Local Change Detection: Signal Change in OnPush Component
= OnPush = Default 1. Waiting for Events 3. Dirty Marking 4. Change Detection zone.js 2. Event Happens
RainerHahnekamp Change Detection in the Future • Careful with OnPush
with zone.js • "Acceptable" with upcoming Scheduler • Simple & Easy with upcoming Signal Components
RainerHahnekamp Further Reading and Watching https://medium.com/ngconf/ngrx-signal-store-the-mis sing-piece-to-signals-ac125d804026 https://youtu.be/0PJPZ3rLqrY