डेटा बाइन्डिङ्ग एक कम्पोनेन्टको क्लास र यसको टेम्प्लेटलाई जोडिन्छ। 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 -->
[(...)] सिन्ट्याक्स ("बक्समा केरा") गुणसंपत्ति + घटना बाइन्डिङ्गलाई दुबै-तरफा सिङ्कको लागि जोडिन्छ — सबैभन्दा सामान्यतः ngModel को साथ फार्म इनपुटहरूमा।
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
दुबै-तरफा [()] केवल गुणसंपत्ति बाइन्डिङ्ग [] र घटना बाइन्डिङ्ग () को संयोजन हो — कोष्ठकहरू दिशाहरू देखाउँछन्।
डेटा बाइन्डिङ्ग कसरी Angular ले क्लास र टेम्प्लेटलाई सिङ्कमा राख्छ — यो हरेक गतिशील UI को पछाडिको तन्त्र हो।
चार प्रकारहरू र तिनीहरूको सिन्ट्याक्स ({{}}, [], (), [()]) र प्रत्येकले कुन दिशामा बग्छ यो जान्नु कुनै पनि Angular टेम्प्लेट पढ्न र लेख्नको लागि आवश्यक छ; Angular टेम्प्लेटको लगभग हरेक पङ्क्तिले यीमध्ये एकलाई प्रयोग गर्छ।