Angular & Signals (283 Qs)•Part 1: Architecture, Components, Directives & Lifecycle (1 - 35)
How do you categorize data binding types?
Binding types can be grouped into three categories distinguished by the direction of data flow. They are listed as below,
- From the source-to-view
- From view-to-source
- View-to-source-to-view
The possible binding syntax can be tabularized as below,
| Data direction | Syntax | Type |
|---|---|---|
| From the source-to-view(One-way) | 1. {{expression}} 2. [target]="expression" 3. bind-target="expression" | Interpolation, Property, Attribute, Class, Style |
| From view-to-source(One-way) | 1. (target)="statement" 2. on-target="statement" | Event |
| View-to-source-to-view(Two-way) | 1. [(target)]="expression" 2. bindon-target="expression" | Two-way |
Practical Code Example
html
<!-- 1. Interpolation: One-way from Component to Template -->
<h3>{{ user.name }}</h3>
<!-- 2. Property Binding: One-way from Component to Element Property -->
<img [src]="user.avatarUrl" [alt]="user.name" />
<!-- 3. Event Binding: One-way from Template to Component Method -->
<button (click)="saveProfile()">Save</button>
<!-- 4. Two-Way Binding: Bi-directional synchronization -->
<input [(ngModel)]="user.name" />