Angular Academy · Lesson

model() Signal Inputs

Create two-way bindings with model signals.

model() Signal Inputs is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

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)].

Frequently asked questions

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

Yes — the full text of “model() Signal Inputs” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

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