ਡਾਟਾ ਬਾਈਂਡਿੰਗ ਇੱਕ ਕੰਪੋਨੈਂਟ ਦੀ ਕਲਾਸ ਨੂੰ ਇਸ ਦੇ ਟੈਮਪਲੇਟ ਨਾਲ ਜੋੜਦੀ ਹੈ। 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 + event binding ਨੂੰ ਜੋੜਦਾ ਹੈ — ਸਭ ਤੋਂ ਆਮ ਤੌਰ ਉਪਰ ngModel ਨਾਲ ਫਾਰਮ ਇਨਪੁਟ ਉਪਰ।
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
ਦੋ-ਮਾਰਗ [()] ਸਿਰਫ property binding [] ਅਤੇ event binding () ਜੋੜਿਆ ਗਿਆ ਹੈ — ਬਰੈਕਟ ਦਿਸ਼ਾਵਾਂ ਦਰਸਾਉਂਦੇ ਹਨ।
ਡਾਟਾ ਬਾਈਂਡਿੰਗ ਇਹ ਹੈ ਕਿ ਕਿਵੇਂ Angular ਕਲਾਸ ਅਤੇ ਟੈਮਪਲੇਟ ਨੂੰ ਸਮਕਾਲੀ ਰੱਖਦਾ ਹੈ — ਇਹ ਹਰੇਕ ਗਤੀਸ਼ੀਲ UI ਦੇ ਪਿੱਛੇ ਤੰਤਰ ਹੈ।
ਚਾਰ ਕਿਸਮਾਂ ਅਤੇ ਉਹਨਾਂ ਦੀ ਸਿੰਟੈਕਸ ਜਾਣਨਾ ({{}}, [], (), [()]) ਅਤੇ ਕਿਹੜੀ ਦਿਸ਼ਾ ਹਰੇਕ ਵਹਿੰਦੀ ਹੈ ਕਿਸੇ ਵੀ Angular ਟੈਮਪਲੇਟ ਨੂੰ ਪੜ੍ਹਨ ਅਤੇ ਲਿਖਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ; Angular ਟੈਮਪਲੇਟ ਦੀ ਲਗਭਗ ਹਰ ਲਾਈਨ ਇਨ੍ਹਾਂ ਵਿੱਚੋਂ ਇੱਕ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ।