What is data binding in Angular?

Data binding is the mechanism that synchronizes data between the component class (TypeScript) and its view (HTML template). Angular supports four types: (1) Interpolation (one-way: component → view): {{ expression }} — renders a component property in the template: <h1>Hello {{ username }}</h1>. The expression is evaluated and its string result is displayed; (2) Property binding (one-way: component → view): [property]="expression" — binds a DOM property or Angular input to a component expression: <img [src]="imageUrl">, <button [disabled]="isLoading">, <app-card [title]="post.title">. Use for non-string values; (3) Event binding (one-way: view → component): (event)="handler($event)" — listens to DOM or custom events: <button (click)="handleSubmit()">, <input (keyup)="onKeyUp($event)">; (4) Two-way binding: [(ngModel)]="property" — combines property + event binding for form elements. The "banana in a box" syntax. Requires FormsModule. <input [(ngModel)]="username"> — when the user types, username updates; when username changes in code, the input updates. Two-way binding is shorthand for [ngModel]="username" (ngModelChange)="username = $event".