diff --git a/aio/content/examples/built-in-directives/src/app/app.component.html b/aio/content/examples/built-in-directives/src/app/app.component.html index 6e5d8cba2f..646dd405b3 100644 --- a/aio/content/examples/built-in-directives/src/app/app.component.html +++ b/aio/content/examples/built-in-directives/src/app/app.component.html @@ -8,7 +8,7 @@
Current item name: {{currentItem.name}}
- +
diff --git a/aio/content/examples/built-in-directives/src/app/app.component.ts b/aio/content/examples/built-in-directives/src/app/app.component.ts index 9610096841..e120c5c625 100644 --- a/aio/content/examples/built-in-directives/src/app/app.component.ts +++ b/aio/content/examples/built-in-directives/src/app/app.component.ts @@ -114,6 +114,9 @@ export class AppComponent implements OnInit { trackById(index: number, item: any): number { return item.id; } + getValue(target: EventTarget): string { + return (target as HTMLInputElement).value; + } } diff --git a/aio/content/examples/event-binding/src/app/app.component.html b/aio/content/examples/event-binding/src/app/app.component.html index 40c1ea2a43..719e3460d9 100644 --- a/aio/content/examples/event-binding/src/app/app.component.html +++ b/aio/content/examples/event-binding/src/app/app.component.html @@ -20,9 +20,9 @@ - without NgModel + (input)="currentItem.name=getValue($event.target)"> + without NgModel
Searches when typing stops. Caches for 30 seconds.
- + diff --git a/aio/content/examples/http/src/app/package-search/package-search.component.ts b/aio/content/examples/http/src/app/package-search/package-search.component.ts index f020da50c2..ec7df8282e 100644 --- a/aio/content/examples/http/src/app/package-search/package-search.component.ts +++ b/aio/content/examples/http/src/app/package-search/package-search.component.ts @@ -35,4 +35,9 @@ export class PackageSearchComponent implements OnInit { toggleRefresh() { this.withRefresh = ! this.withRefresh; } + // #docregion getValue + getValue(target: EventTarget): string { + return (target as HTMLInputElement).value; + } + // #enddocregion getValue } diff --git a/aio/content/examples/pipes/src/app/flying-heroes.pipe.ts b/aio/content/examples/pipes/src/app/flying-heroes.pipe.ts index 87db9c277e..7deb7abebe 100644 --- a/aio/content/examples/pipes/src/app/flying-heroes.pipe.ts +++ b/aio/content/examples/pipes/src/app/flying-heroes.pipe.ts @@ -3,11 +3,11 @@ // #docregion pure import { Pipe, PipeTransform } from '@angular/core'; -import { Flyer } from './heroes'; +import { Hero } from './heroes'; @Pipe({ name: 'flyingHeroes' }) export class FlyingHeroesPipe implements PipeTransform { - transform(allHeroes: Flyer[]) { + transform(allHeroes: Hero[]) { // #docregion filter return allHeroes.filter(hero => hero.canFly); // #enddocregion filter diff --git a/aio/content/examples/pipes/src/app/heroes.ts b/aio/content/examples/pipes/src/app/heroes.ts index b2edabe0da..9de7a5c36a 100644 --- a/aio/content/examples/pipes/src/app/heroes.ts +++ b/aio/content/examples/pipes/src/app/heroes.ts @@ -1,5 +1,5 @@ -export interface Flyer { canFly: boolean; } -export const HEROES = [ +export interface Hero { name: string; canFly: boolean; } +export const HEROES: Hero[] = [ {name: 'Windstorm', canFly: true}, {name: 'Bombasto', canFly: false}, {name: 'Magneto', canFly: false}, diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html index 096df75b6e..59fa05b1c1 100644 --- a/aio/content/examples/template-syntax/src/app/app.component.html +++ b/aio/content/examples/template-syntax/src/app/app.component.html @@ -219,11 +219,9 @@ buttonis the interpolated image.
diff --git a/aio/content/guide/event-binding-concepts.md b/aio/content/guide/event-binding-concepts.md index e040392a9d..38d56faca8 100644 --- a/aio/content/guide/event-binding-concepts.md +++ b/aio/content/guide/event-binding-concepts.md @@ -25,7 +25,15 @@ With this example, the following actions occur: 1. The code binds to the `input` event of the `` element, which allows the code to listen for changes. 1. When the user makes changes, the component raises the `input` event. 1. The binding executes the statement within a context that includes the DOM event object, `$event`. -1. Angular retrieves the changed text by following the path `$event.target.value` and updates the `name` property. +1. Angular retrieves the changed text by calling `getValue($event.target)` and updates the `name` property. If the event belongs to a directive or component, `$event` has the shape that the directive or component produces. +