Two-Way Binding

Learning objectives#

• Use [(ngModel)] with FormsModule
• Bind to signals with two-way binding
• Create a two-way bindable component with model()
• Understand the property + event pair behind [( )]

Explanation#

[(x)]="value" is shorthand for [x]="value" (x)="value = $event" — data in and events out together.

For form fields, import FormsModule and write <input [(ngModel)]="name" />. Two-way binding also works directly with a writable signal: [(ngModel)]="name" where name = signal("").

Your own components support two-way binding with model(): value = model(0). The parent writes <app-stepper [(value)]="qty" /> and both stay in sync.

Inside the child, this.value.set(...) updates its own value and notifies the parent automatically.

Use two-way binding for simple editors. For complex forms with validation, reactive forms give more control.

Syntax#

1<input [(ngModel)]="name" />            <!-- form field -->
2<app-stepper [(value)]="quantity" />    <!-- your component with model() -->

Code example: A stepper component and a text field, both two-way#

1import { Component, computed, model, signal } from '@angular/core';
2import { FormsModule } from '@angular/forms';
3

4@Component({
5  selector: 'app-stepper',
6  template: `
7    <button (click)="decrease()" [disabled]="value() <= min">−</button>
8    <strong> {{ value() }} </strong>
9    <button (click)="increase()">+</button>
10  `,
11})
12export class Stepper {
13  value = model(1);                 // two-way bindable input
14  min = 1;
15  increase() { this.value.update(v => v + 1); }
16  decrease() { this.value.update(v => Math.max(this.min, v - 1)); }
17}
18

19@Component({
20  selector: 'app-cart-line',
21  imports: [FormsModule, Stepper],
22  template: `
23    <label>Gift message <input [(ngModel)]="message" maxlength="40" /></label>
24    <p>Preview: “{{ message() || '…' }}”</p>
25

26    <app-stepper [(value)]="quantity" />
27    <p>{{ quantity() }} × ₹60 = ₹{{ total() }}</p>
28    <button (click)="quantity.set(1)">Reset quantity</button>
29  `,
30})
31export class CartLine {
32  message = signal('');
33  quantity = signal(2);
34  total = computed(() => this.quantity() * 60);
35}

Typing in the gift-message box updates the preview instantly. The stepper starts at 2 and the line reads “2 × ₹60 = ₹120”; + and − change both the stepper and the total. “Reset quantity” sets the parent signal to 1 and the stepper shows 1 — data flows both ways.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. model(1) declares a value the parent can bind with [( )].
2. The stepper changes its own value with update; Angular pushes the change to the parent’s quantity signal.
3. [(value)]="quantity" in the parent connects the stepper to the quantity signal.
4. [(ngModel)]="message" binds the input to a signal; FormsModule must be imported.
5. Resetting quantity in the parent updates the stepper — proving the binding works in both directions.

Real-world use case#

Common mistakes#

Best practices#

• model() for reusable editable components
• Bind writable signals
• Use reactive forms for complex validation
• Keep data flow mostly one-way

Remember this#

Practice exercise#

1import { Component, model, signal } from '@angular/core';
2

3@Component({
4  selector: 'app-toggle',
5  template: `<button (click)="flip()" [attr.aria-pressed]="on()">{{ on() ? 'ON' : 'OFF' }}</button>`,
6})
7export class ToggleSwitch {
8  on = model(false);
9  flip() { this.on.update(v => !v); }
10}
11

12@Component({
13  selector: 'app-settings',
14  imports: [ToggleSwitch],
15  template: `<app-toggle [(on)]="notifications" /> <p>Notifications: {{ notifications() ? 'ON' : 'OFF' }}</p>`,
16})
17export class Settings {
18  notifications = signal(true);
19}

Mini quiz#

Want more? Practise all Angular MCQs · Angular interview questions

Related topics#

My notes#

Saved in this browser.