model • Angular

@angular/core

Initializer API

stablesince v19.0

model declares a writeable signal that is exposed as an input/output pair on the containing directive.

The input name is taken either from the class member or from the alias option. The output name is generated by taking the input name and appending Change.

Initializes a model of type T with an initial value of undefined. Angular will implicitly use undefined as initial value.

Initializes a model of type T with the given initial value.

Initializes a required model.

Users of your directive/component need to bind to the input side of the model. If unset, a compile time error will be reported.

Usage Notes

To use model(), import the function from @angular/core.

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

Inside your component, introduce a new class member and initialize it with a call to model or model.required.

Inside your component template, you can display the value of a model by calling the signal.

<span>{{firstName()}}</span>

Updating the model is equivalent to updating a writable signal.

updateName(newFirstName: string): void {
  this.firstName.set(newFirstName);
}