Chapter 10.4☕ 15 min read

Model Signals — model()

model() is a writable signal that supports two-way binding with parent components. It combines @Input, @Output, and signal() into a single declarative API.

01What is model()

model() is a special type of signal introduced in Angular 17.3+ that supports two-way binding. Think of it as signal() + @Input() + @Output() combined into one line.

"model = two-way signal — template se change karo ya TypeScript se, dono sync."

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

@Component({
  selector: 'app-biryani-card',
  template: `
    <h3>{{ name() }}</h3>
    <p>₹{{ price() }}</p>
    <input [ngModel]="name()" (ngModelChange)="name.set($event)">
  `
})
export class BiryaniCardComponent {
  // model() = signal + @Input + @Output in one line!
  name = model('Biryani');
  price = model(0);
}

How model() solves the old two-way problem:

Old way: @Input() name + @Output() nameChange + EventEmitter = 5+ lines
New way: name = model('') = 1 line
Parent still uses: [(name)]="myName" — same syntax!
Inside component, model() works exactly like signal() — read with (), write with .set()/.update()

02model() in a Component

Using model() in a child component is straightforward:

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

@Component({
  selector: 'app-biryani-card',
  standalone: true,
  template: `
    <div class="card" [class.selected]="selected()">
      <h3>{{ name() }}</h3>
      <span class="price">₹{{ price() }}</span>
      <span class="rating">⭐ {{ rating() }}</span>
      <button (click)="toggleSelect()">
        {{ selected() ? 'Deselect' : 'Select' }}
      </button>
    </div>
  `
})
export class BiryaniCardComponent {
  // model() signals — support two-way binding
  name = model.required<string>();
  price = model(0);
  rating = model(4.5);
  selected = model(false);
}

// Parent component uses:
// <app-biryani-card [(name)]="selectedBiryani">

"model() = signal + @Input + @Output combined into one line — 3-in-1."

How it works: model() creates a writable signal AND automatically creates a corresponding @Output() nameChange event emitter. When you call this.name.set('new'), it updates the signal AND emits nameChange so the parent knows to update its binding.

03Using model() in Template

Inside the component's own template, model() can be used with either one-way or two-way binding:

<!-- Reading model() value -->
<h3>{{ name() }}</h3>  

<!-- One-way binding: input displays model, but changes don't update model -->
<input [value]="name()">

<!-- Two-way with plain input: need to handle change manually -->
<input [value]="name()" (input)="name.set($any($event.target).value)">

<!-- Two-way with Angular's [model] directive (shorthand) -->
<input [model]="name">

<!-- With ngModel — still works -->
<input [(ngModel)]="name">

Angular has a special [model] directive that works directly with model() signals — no need for (ngModelChange) or manual event handling.

"[model] directive = model signal ke saath direct two-way — no ngModel needed."

With controls:

<!-- Checkbox -->
<input type="checkbox" [model]="isAvailable">

<!-- Select -->
<select [model]="category">
  <option value="Veg">Veg</option>
  <option value="Non-Veg">Non-Veg</option>
</select>

04model() vs signal() vs @Input/@Output

Here's the comparison between all approaches for child-parent communication:

	signal()	model()	@Input + @Output
Lines of code	1	1	5-7
Two-way binding	❌ No	✅ Yes	✅ Yes (manual)
Writable inside component	✅ Yes	✅ Yes	❌ Input is read-only
Signal ecosystem	✅ Yes	✅ Yes	❌ No
Parent usage	N/A	`[(name)]="x"`	`[(name)]="x"`
Auto-change detection	✅ Yes	✅ Yes	⚠️ Only with OnPush

// ❌ WRONG: signal() for two-way — parent can't bind
name = signal('Biryani');
// <app-biryani [(name)]="x"> — DOESN'T WORK!

// ✅ RIGHT: model() for two-way
name = model('Biryani');
// <app-biryani [(name)]="x"> — WORKS!

// ❌ OLD: @Input + @Output (boilerplate)
@Input() name = '';
@Output() nameChange = new EventEmitter<string>();
updateName(val: string) { this.name = val; this.nameChange.emit(val); }

"model() = 3-in-1 — signal + input + output. signal() = internal state only."

05Configuring model() with Options

model() supports configuration options for flexibility:

required — must be provided by parent:

// Parent MUST provide this binding — TypeScript error if not
name = model.required<string>();
// <app-biryani [(name)]="someValue"> — REQUIRED

alias — rename for parent usage:

// Component property is 'name', parent uses 'biryaniName'
name = model('', { alias: 'biryaniName' });
// Parent: <app-biryani [(biryaniName)]="myName">

initializer — lazy initialization:

name = model('', { initializer: () => getDefaultName() });
// Uses function result as initial value, not called unnecessarily

Combined example:

export class BiryaniCardComponent {
  // Required model with alias
  biryaniItem = model.required<Biryani>({ alias: 'item' });

  // Required simple value
  name = model.required<string>();

  // Optional with custom initializer
  rating = model(4.5, { initializer: () => loadDefaultRating() });

  // Simple optional
  price = model(0);
}

// Parent usage:
// <app-biryani-card [(item)]="biryaniData" [(name)]="biryaniName">

"Options = customization — alias do, required banao, default value do. model() handles everything."

Key Takeaways

✅ model() = signal + @Input + @Output combined — 3-in-1
✅ Two-way binding: parent uses [(name)]="value" syntax
✅ Writable inside component — .set() and .update() work like signal()
✅ [model] directive — works with model() for template two-way binding
✅ Options: required, alias, initializer
✅ model() replaces @Input + @Output + EventEmitter boilerplate

Previous10.3 — Effect 📋 All Chapters Next Chapter10.5 — Signals vs BehaviorSubject →