Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

docs: use model API in two-way binding example (#59194)

Browse source 
PR Close #59194
This commit is contained in:
Lang 2024-12-14 17:02:22 +01:00 committed by Miles Malerba
parent 2e03a8685b
commit 3f65b32ee7
1 changed files with 8 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
adev/src/content/guide/templates/two-way-binding.md
View file

@ -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: