Angular Academy · Lesson

model() Signal Inputs

Create two-way bindings with model signals.

Lesson 3 of 413 steps

model() Signal Inputs is a free Angular Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

Signals Meet Two-Way Binding

Modern Angular offers model(), a signal-based way to create two-way bindable inputs without manual input/output pairs.

Declaring a model Input

Call model() to create a writable signal that a parent can two-way bind to.

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

@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
  checked = model(false);
}

Binding from a Parent

The parent uses the banana-in-a-box syntax against the model name, exactly like ngModel.

<app-toggle [(checked)]="isOn"></app-toggle>

// parent
isOn = signal(true);

Reading a model Value

A model is a signal, so read it by calling it like a function.

export class ToggleComponent {
  checked = model(false);
  describe() {
    return this.checked() ? "on" : "off";
  }
}

Writing to a model

Update a model with set or update. The change propagates back to the parent automatically.

toggle() {
  this.checked.update(c => !c);
}

// or
turnOn() {
  this.checked.set(true);
}

Required model Inputs

Use model.required() when the parent must provide a value.

import { model } from "@angular/core";

export class FieldComponent {
  value = model.required<string>();
}

Using model in the Template

Bind the model signal directly in the component own template; calling it gives the current value.

@Component({
  selector: "app-toggle",
  template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
  checked = model(false);
  flip() { this.checked.update(v => !v); }
}

No Manual Output Needed

With model() you do not declare a separate @Output. Angular wires up the change event for you using the convention name plus Change.

model vs input

A plain input() is read-only inside the component, while a model() is writable and supports two-way binding back to the parent.

// read-only:
label = input("");

// two-way writable:
value = model("");

A Counter with model

Here is a self-contained counter whose value stays in sync with the parent.

@Component({
  selector: "app-counter",
  template: "<button (click)='inc()'>{{ count() }}</button>"
})
export class CounterComponent {
  count = model(0);
  inc() { this.count.update(c => c + 1); }
}

When to Reach for model

Use model() when a child component owns a value the parent also wants to read and update, like custom form controls, toggles, and sliders.

Quick Check

Test your understanding of model signal inputs.

Answer it in the interactive lesson

Recap

The model() function creates a writable signal that supports two-way binding without a manual input/output pair. Read it by calling it, write with set or update, and bind from the parent with [(name)].

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “model() Signal Inputs” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “model() Signal Inputs”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

What will I learn in “model() Signal Inputs”?

Create two-way bindings with model signals. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

How long does the “model() Signal Inputs” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy