Databindning kopplar en komponents klass till sin mall. Angular har fyra former, åtskilda av riktningen på dataflödet och deras karakteristiska syntax.
1. Interpolation — klass → vy (text)
html
{{ 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 -->
Eckiga parenteser [ ] binder en egenskap till ett uttryck (envägs, data flödar ned i vyn).
<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 -->
Parenteser ( ) lyssnar på händelser (envägs, data flödar upp från vyn till klassen).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Syntaxen [(...)] ("banan i en låda") kombinerar egenskapsbindning + händelsebindning för dubbelriktad synkronisering — oftast med ngModel på formulärinmatningar.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Dubbelriktad [()] är bara egenskapsbindning [] plus händelsebindning () kombinerad — parenteserna visar riktningarna.
Databindning är hur Angular håller klassen och mallen synkroniserad — det är mekanismen bakom varje dynamiskt användargränssnitt.
Att kunna de fyra typerna och deras syntax ({{}}, [], (), [()]) och vilken riktning var och en flödar är väsentligt för att läsa och skriva en Angular-mall; nästan varje rad i en Angular-mall använder någon av dem.