Data binding کمپوننٹ کی کلاس کو اس کے template سے جوڑتی ہے۔ Angular میں چار طریقے ہیں، جو direction کے لحاظ سے اور ان کی منفرد syntax سے الگ ہیں۔
1. Interpolation — کلاس → view (متن)
html
{{ title }}
{{ price * quantity }}
Data binding کمپوننٹ کی کلاس کو اس کے template سے جوڑتی ہے۔ Angular میں چار طریقے ہیں، جو direction کے لحاظ سے اور ان کی منفرد syntax سے الگ ہیں۔
{{ 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 -->
مربع بریکٹ [ ] ایک property کو expression سے جوڑتے ہیں (یک طرفہ، ڈیٹا view میں نیچے بہتا ہے)۔
<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 -->
قوسین ( ) events کو سنتے ہیں (یک طرفہ، ڈیٹا view سے کلاس میں اوپر بہتا ہے)۔
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
[(...)] syntax ("banana in a box") property binding اور event binding کو دو طرفہ sync کے لیے یکجا کرتی ہے — سب سے زیادہ form inputs پر ngModel کے ساتھ استعمال ہوتی ہے۔
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
دو طرفہ [()] محض property binding [] اور event binding () کو ملایا ہوا ہے — بریکٹ directions کو ظاہر کرتے ہیں۔
Data binding وہ طریقہ ہے جس سے Angular کلاس اور template کو سنکھرا رکھتا ہے — یہ ہر dynamic UI کے پیچھے کا میکانزم ہے۔
چاروں اقسام اور ان کی syntax ({{}}, [], (), [()]) اور ہر ایک کی direction کو جاننا کسی بھی Angular template کو پڑھنے اور لکھنے کے لیے ضروری ہے؛ Angular template کی تقریباً ہر لائن ان میں سے کسی ایک کو استعمال کرتی ہے۔