Data binding एक घटक की कक्षा को उसके टेम्पलेट से जोड़ता है। 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 [ ] + ( )
द्विमुखी [()] केवल प्रॉपर्टी बाइंडिंग [] और ईवेंट बाइंडिंग () को संयोजित करता है — कोष्ठक दिशाओं को दिखाते हैं।
Data binding वह तरीका है जिससे Angular वर्ग और टेम्पलेट को सिंक में रखता है — यह हर गतिशील UI के पीछे की प्रणाली है।
चारों प्रकारों और उनके वाक्यविन्यास ({{}}, [], (), [()]) को जानना और यह जानना कि प्रत्येक किस दिशा में बहता है, किसी भी Angular टेम्पलेट को पढ़ने और लिखने के लिए आवश्यक है; Angular टेम्पलेट की लगभग हर पंक्ति इनमें से एक का उपयोग करती है।