Data binding nyambung kelas komponen karo templatee. Angular nduweni papat wujud, beda-beda miturut arah aliran data lan sintaksis khas-kashine.
1. Interpolation — kelas → view (teks)
html
{{ title }}
{{ price * quantity }}
Data binding nyambung kelas komponen karo templatee. Angular nduweni papat wujud, beda-beda miturut arah aliran data lan sintaksis khas-kashine.
{{ 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 -->
Kurung siku [ ] ngikat properti marang eksplorasi (one-way, data mengalir mudhun menyang 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 -->
Parentesis ( ) ngrungokake acara (one-way, data mengalir munggah saka view menyang kelas).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Sintaksis [(...)] ("pisang ing kothak") nggabung property binding + event binding kanggo sinkronisasi loro arah — paling umum karo ngModel ing input formulir.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Two-way [()] mung property binding [] plus event binding () digabung — kurung ing tunjukake arah-arahe.
Data binding yaiku cara Angular njaga kelas lan template tetep sinkron — mau mekanisme ing mburi saben UI dinamis.
Ngerti papat jinis lan sintaksis-kashine ({{}}, [], (), [()]) lan arah aliran saben wae kuwi penting banget kanggo maca lan nulis template Angular apa wae; meh saben baris template Angular nganggo sak-sijine.