Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

model

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

See more...

      
      const model: ModelFunction;
    

Description

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.

Further information is available in the Usage Notes...

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.

      
      @Directive({
  ...
})
export class MyDir {
  firstName = model<string>();            // ModelSignal<string|undefined>
  lastName  = model.required<string>();   // ModelSignal<string>
  age       = model(0);                   // ModelSignal<number>
}
    

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);
}