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
Test Fest | Angular Unit Tests Distilled
rainerhahnekamp
0
360
Micro Frontends: Necessity, Implementation, and Challenges
rainerhahnekamp
2
790
Software richtig testen - Ganz praktisch!
rainerhahnekamp
0
95
Quality with Angular: Tools and Processes
rainerhahnekamp
0
340
Evolving Architecture
rainerhahnekamp
3
380
Microfrontends: Necessities - Implementations - Challenges
rainerhahnekamp
0
200
Zoneless Testing
rainerhahnekamp
0
230
Towards Modern Change Detection
rainerhahnekamp
0
38
Testing in 2024: A "dynamic" Situation
rainerhahnekamp
0
210
Other Decks in Technology
See All in Technology
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
Geminiとv0による高速プロトタイピング
shinya337
1
270
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
160
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
270
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
280
Operating Operator
shhnjk
1
580
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
510
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
Lazy application authentication with Tailscale
bluehatbrit
0
210
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
2025 AWS Jr. Championが振り返るAWS Summit
kazukiadachi
0
110
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Six Lessons from altMBA
skipperchong
28
3.9k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Done Done
chrislema
184
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Agile that works and the tools we love
rasmusluckow
329
21k
Music & Morning Musume
bryan
46
6.6k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Raft: Consensus for Rubyists
vanstee
140
7k
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