ডేటా బైండింగ్ ఒక కమ్పోనెంట్ యొక్క క్లాస్ను దాని టెంప్లేట్తో అనుసంధానం చేస్తుంది. 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 -->
[(...)] సింటాక్స్ ("పెట్టెలో అరటిపండు") రెండు-దిశ సమకాలీకరణ కోసం property + ఈవెంట్ బైండింగ్ను కలుపుతుంది — ఎక్కువగా ఫారమ్ ఇన్పుట్లపై ngModelతో.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
రెండు-దిశ [()] కేవలం property బైండింగ్ [] మరియు ఈవెంట్ బైండింగ్ () కలిపి ఉంటుంది — కుండలీకరణాలు దిశలను చూపుతాయి.
డేటా బైండింగ్ Angular క్లాస్ మరియు టెంప్లేట్ను సింక్లో ఉంచే విధానం — ఇది ప్రతి డైనమిక్ UI యొక్క మెకానిజం.
నాలుగు రకాలు మరియు వాటి సింటాక్స్ ({{}}, [], (), [()]) మరియు ప్రతిదానికి ఏ దిశ ప్రవహిస్తుంది అనేది చదవడానికి మరియు ఏదైనా Angular టెంప్లేట్ను వ్రాయడానికి అপরిహార్యమైనది; Angular టెంప్లేట్ యొక్క దాదాపు ప్రతి లైన్ వాటిలో ఒకదాన్ని ఉపయోగిస్తుంది.
జూనియర్ నుండి సీనియర్ వరకు వివరణాత్మక సమాధానాలతో IT ఇంటర్వ్యూ ప్రశ్నల లైబ్రరీ.
విరాళం