model
model
declares a writeable signal that is exposed as an input/output
pair on the containing directive.
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);
}