ডেটা বাইন্ডিং একটি কম্পোনেন্ট-এর ক্লাস-কে তার টেমপ্লেট-এর সাথে সংযুক্ত করে। 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 টেমপ্লেট-এর প্রায় প্রতিটি লাইন এর মধ্যে একটি ব্যবহার করে।