parent
7c4fabcfac
commit
3137359c7d
@ -7,7 +7,7 @@
|
||||
<!-- #docregion ngModel-3 -->
|
||||
<input type="text" class="form-control" required
|
||||
[ngModel]="model.name"
|
||||
(ngModel-change)="model.name = $event" >
|
||||
(ngModelChange)="model.name = $event" >
|
||||
TODO: remove this: {{model.name}}
|
||||
<!-- #enddocregion ngModel-3 -->
|
||||
</div>
|
||||
|
@ -342,13 +342,13 @@ figure.image-display
|
||||
:marked
|
||||
<br>The property binding should feel familiar. The event binding might seem strange.
|
||||
|
||||
The name `ngModel-change` specifies an event property of the `NgModel` directive.
|
||||
When Angular sees a binding target in the form <span style="font-family:courier">[(abc)]</span>,
|
||||
it expects the `abc` directive to have an `abc` input property and an `abc-change` output property.
|
||||
The name `ngModelChange` specifies an event property of the `NgModel` directive.
|
||||
When Angular sees a binding target in the form <span style="font-family:courier">[(x)]</span>,
|
||||
it expects the `x` directive to have an `x` input property and an `xChange` output property.
|
||||
|
||||
The other oddity is the template expression, `model.name = $event`.
|
||||
We're used to seeing an `$event` object coming from a DOM event.
|
||||
The `ngModel-change` property doesn't produce a DOM event; it's an Angular `EventEmitter`
|
||||
The `ngModelChange` property doesn't produce a DOM event; it's an Angular `EventEmitter`
|
||||
property that returns the input box value when it fires—which is precisely what
|
||||
we should assign to the model's `name` property.
|
||||
|
||||
|
@ -330,8 +330,8 @@ figure.image-display
|
||||
|
||||
The `ngModelChange` is not an `<input>` element event.
|
||||
It is actually an event property of the `NgModel` directive.
|
||||
When Angular sees a binding target in the form <span style="font-family:courier">[(abc)]</span>,
|
||||
it expects the `abc` directive to have an `abc` input property and an `abc-change` output property.
|
||||
When Angular sees a binding target in the form <span style="font-family:courier">[(x)]</span>,
|
||||
it expects the `x` directive to have an `x` input property and an `xChange` output property.
|
||||
|
||||
The other oddity is the template expression, `model.name = $event`.
|
||||
We're used to seeing an `$event` object coming from a DOM event.
|
||||
|
@ -328,8 +328,8 @@ figure.image-display
|
||||
|
||||
The `ngModelChange` is not an `<input>` element event.
|
||||
It is actually an event property of the `NgModel` directive.
|
||||
When Angular sees a binding target in the form <span style="font-family:courier">[(abc)]</span>,
|
||||
it expects the `abc` directive to have an `abc` input property and an `abc-change` output property.
|
||||
When Angular sees a binding target in the form <span style="font-family:courier">[(x)]</span>,
|
||||
it expects the `x` directive to have an `x` input property and an `xChange` output property.
|
||||
|
||||
The other oddity is the template expression, `model.name = $event`.
|
||||
We're used to seeing an `$event` object coming from a DOM event.
|
||||
|
@ -651,7 +651,7 @@ code-example(format="", language="html").
|
||||
Internally, Angular maps the term, `ngModel`, to an `ngModel` input property and an
|
||||
`ngModelChange` output property.
|
||||
That’s a specific example of a more general pattern in which it matches `[(x)]` to an `x` input property
|
||||
for Property Binding and an `x-change` output property for Event Binding.
|
||||
for Property Binding and an `xChange` output property for Event Binding.
|
||||
|
||||
We can write our own two-way binding directive that follows this pattern if we're ever in the mood to do so.
|
||||
:marked
|
||||
|
Loading…
x
Reference in New Issue
Block a user