தரவு பிணைப்பு ஒரு கூறுகளின் வகுப்பை அதன் வார்ப்பிலும் இணைக்கிறது. 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 வார்ப்பின் கிட்டத்தட்ட ஒவ்வொரு வரியும் அவற்றில் ஒன்றைப் பயன்படுத்துகிறது.