Model input

Model input type in Angular allows two-way binding where parent sends value to the child, and the child can send value back to the parent.

In the example below, when you first run the app, you will see these logs. Initially, parent sets the model input to 1. The child component receives it and effect detects it.

main.ts:24 testValue changed:  1
test.component.ts:44 child testModelValue:  1

When you click the increment button on the child component, you will see these logs. This shows that when the child component modifies the model input, parent’s effect detects the change in the value.

testValue changed:  2
test.component.ts:44 child testModelValue:  2

Parent component:

@Component({
	selector: "app-root",
	imports: [TestComponent],
	template: ` <app-test [(testModelValue)]="testValue"></app-test> `,
})
export class App {
	testValue = signal(1);

	constructor() {
		effect(() => {
			console.log("testValue changed: ", this.testValue());
		});
	}
}

Child component:

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrl: './test.component.css',
})
export class TestComponent {
  testModelValue = model(0);

  constructor() {
    effect(() => {
      console.log('child testModelValue: ', this.testModelValue());
    });
  }

  incrementValue() {
    this.testModelValue.set(this.testModelValue() + 1);
  }

<h3>testModelValue: {{ testModelValue() }}</h3>
<button (click)="incrementValue()">increment test model value</button>