From 3f65b32ee7816fc3ef455b6a4e26511b0637efd4 Mon Sep 17 00:00:00 2001
From: Lang <hello.liulang@gmail.com>
Date: Sat, 14 Dec 2024 17:02:22 +0100
Subject: [PATCH] docs: use model API in two-way binding example (#59194) PR
 Close #59194

---
 .../guide/templates/two-way-binding.md        | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/adev/src/content/guide/templates/two-way-binding.md b/adev/src/content/guide/templates/two-way-binding.md
index c3380685614..76f5d7d3a13 100644
--- a/adev/src/content/guide/templates/two-way-binding.md
+++ b/adev/src/content/guide/templates/two-way-binding.md
@@ -68,7 +68,7 @@ export class AppComponent {
 
 ```angular-ts
 // './counter/counter.component.ts';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, model } from '@angular/core';
 
 @Component({
   selector: 'app-counter',
@@ -79,12 +79,10 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   `,
 })
 export class CounterComponent {
-  @Input() count: number;
-  @Output() countChange = new EventEmitter<number>();
+  count = model<number>(0);
 
   updateCount(amount: number): void {
-    this.count += amount;
-    this.countChange.emit(this.count);
+    this.count.update(currentCount => currentCount + amount);
   }
 }
 ```
@@ -95,31 +93,27 @@ If we break down the example above to its core , each two-way binding for compon
 
 The child component must contain:
 
-1. An `@Input()` property
-1. A corresponding `@Output()` event emitter that has the exact same name as the input property plus "Change" at the end. The emitter must also emit the same type as the input property.
-1. A method that emits to the event emitter with the updated value of the `@Input()`.
+1. An `model` property
 
 Here is a simplified example:
 
 ```angular-ts
 // './counter/counter.component.ts';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, model } from '@angular/core';
 
 @Component({ // Omitted for brevity })
 export class CounterComponent {
-  @Input() count: number;
-  @Output() countChange = new EventEmitter<number>();
+  count = model<number>(0);
 
   updateCount(amount: number): void {
-    this.count += amount;
-    this.countChange.emit(this.count);
+    this.count.update(currentCount => currentCount + amount);
   }
 }
 ```
 
 The parent component must:
 
-1. Wrap the `@Input()` property name in the two-way binding syntax.
+1. Wrap the `model` property name in the two-way binding syntax.
 1. Specify the corresponding property to which the updated value is assigned
 
 Here is a simplified example: