डेटा बाइंडिंग एक घटकाच्या क्लासला त्याच्या टेम्पलेटशी जोडते. Angular मध्ये चार प्रकार आहेत, जे डेटा प्रवाहाची दिशा आणि त्यांचा विशिष्ट वाक्यरचना यावरून वेगळे केले जातात.
{{ title }}
{{ price * quantity }}
<img [src]="imageUrl" /> <!-- bind a DOM property -->
<button [disabled]="isLoading">Save</button>
<app-child [user]="currentUser"></app-child> <!-- pass to a component @Input -->
चौरस कंस [ ] एक मालमत्तेला अभिव्यक्तीशी बांधतात (एकमुखी, डेटा खाली दृश्यात वाहतो).
<button (click)="save()">Save</button> <!-- DOM event → method -->
<input (input)="onInput($event)" /> <!-- $event = the event object -->
<app-child (deleted)="onDeleted($event)"></app-child> <!-- component @Output -->
कंस ( ) इव्हेंट्सला ऐकतात (एकमुखी, डेटा दृश्यापासून वर क्लासमध्ये वाहतो).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
[(...)] वाक्यरचना ("banana in a box") मालमत्ता + इव्हेंट बाइंडिंग दोन्हीला दोन-मुखी सिंकसाठी एकत्रित करते — सर्वाधिक सामान्यतः फॉर्म इनपुटवर ngModel सह.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
दोन-मुखी [()] हा केवळ मालमत्ता बाइंडिंग [] आणि इव्हेंट बाइंडिंग () एकत्रित केलेला आहे — कंस दिशा दर्शवतात.
डेटा बाइंडिंग हेच Angular ला क्लास आणि टेम्पलेट सिंक ठेवते — हेच प्रत्येक गतिशील UI मागील यंत्रणा आहे.
चार प्रकार आणि त्यांची वाक्यरचना ({{}}, [], (), [()]) आणि प्रत्येक कोणती दिशा वाहते हे जाणून घेणे कोणतीही Angular टेम्पलेट वाचणे आणि लिहिणे अत्यावश्यक आहे; Angular टेम्पलेटच्या जवळजवळ प्रत्येक ओळ यातील एकाचा वापर करते.