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
Databinding in Angular 2
Search
Manfred Steyer
PRO
October 25, 2016
Programming
0
210
Databinding in Angular 2
Manfred Steyer
PRO
October 25, 2016
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
160
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
90
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
150
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
300
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
95
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
100
Other Decks in Programming
See All in Programming
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
19
7.5k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
920
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
180
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
400
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.7k
GPUを計算資源として使おう!
primenumber
1
120
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
430
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.6k
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
230
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
Writing Fast Ruby
sferik
628
62k
Designing for humans not robots
tammielis
253
25k
Speed Design
sergeychernyshev
32
1k
Making Projects Easy
brettharned
116
6.3k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Site-Speed That Sticks
csswizardry
10
690
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Transcript
Data Binding in Angular 2 Manfred Steyer
About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer
& Consultant • GDE and MVP • Focus: Angular Page 2 Manfred Steyer
Data Binding in AngularJS 1.x Page 4 Model Model
Directive Nearly everything can depend on everything Leads to serveral digest cycles
Angular 2 Page 5 Component for whole App Component
(e. g. list) Component (e. g. list-item) Component (e. g. list-item)
Property Binding (One Way, Top/Down) Page 6 model item
item {{ item.title }} {{ item.title }} [http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]
Property Binding (One Way, Top/Down) • Only one digest cycle
needed • Child component must not modify parent component (e. g. by using setters) • Angular 2 checks for this in dev mode
Event Bindings (One Way, Bottom/Up) Page 8 {{ item.title
}} {{ item.title }} Event-Handler Event-Handler
Event Bindings (One Way, Bottom/Up) • No digest cycle for
propagating events • But: Events can change state Updating Property Bindings Page 9
Property and Event Bindings Page 10 Performing Property Bindings
Executing Event Handlers Event occurs App is ready All handlers executed Properties bound
Two Way Binding Page 11 <input [(ngModel)]="from">
Two Way = Property and Event Bindings Page 12
<input [ngModel]="from" (ngModelChange)="from = $event"> Property + Change changed value
Summary • Property Binding: One Way; Top/Down • Event Binding:
One Way; Bottom/Up • Two Way = Property Binding + Event Binding • Conventions for Two Way Binding • Align to this conventions in own components Page 13
Contact [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer