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