Data Binding & Interpolation

🅰️ Angular Lesson 3 Beginner

Data binding establishes communication flow between a component's TypeScript controller and its HTML template layout, enabling dynamic updates.

1 Four Types of Binding Flow

Angular supports specific syntax pathways based on data flow directions:

Interpolation: Outputs data value strings into templates using double curly braces: {{ expression }}.
Property Binding: Binds variable expressions to DOM element attributes from controller to template: [src]="imageUrl".
Event Binding: Listens for user interactions, running class methods from template to controller: (click)="onSave()".
Two-Way Binding: Synchronizes values between view inputs and component variables instantly: [(ngModel)]="username".

2 Data Binding Implementation

Let's check these methods inside a single template block:

HTML — Angular Data Bindings

<!-- Interpolation -->
<h3>Welcome, {{ user.name }}</h3>

<!-- Property Binding -->
<button [disabled]="isButtonDisabled">Action</button>

<!-- Event Binding -->
<button (click)="toggleState()">Toggle Status</button>

<!-- Two-way Binding (Requires FormsModule) -->
<input [(ngModel)]="user.name" placeholder="Edit name">

3 Code Challenge

Challenge: Write a component class mapping a boolean flag. Render a button that toggles this flag value when clicked, and bind it to a text section showing "ON" or "OFF" dynamically.