Data binding ઘટકના વર્ગને તેના template સાથે જોડે છે. Angular પાસે ચાર સ્વરૂપો છે, જે ડેટા પ્રવાહની દિશા અને તેમના વિશિષ્ટ વાક્યરચના દ્વારા અલગ પડે છે.
1. Interpolation — વર્ગ → દૃશ્ય (ટેક્સ્ટ)
html
{{ title }}
{{ price * quantity }}
Data binding ઘટકના વર્ગને તેના template સાથે જોડે છે. 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 વર્ગ અને template ને સમન્વયિત રાખે છે — તે દરેક ગતિશીલ UI પાછળની પદ્ધતિ છે.
ચાર પ્રકારો અને તેમની વાક્યરચના ({{}}, [], (), [()]) અને દરેક કે જે દિશા વહે છે તે જાણવું કોઈપણ Angular template વાંચવા અને લખવા માટે આવશ્યક છે; Angular template ના લગભગ દરેક લાઈન તેમાંથી એક મધ્યે વપરાય છે.