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

diff --git a/aio/content/examples/event-binding/src/app/app.component.ts b/aio/content/examples/event-binding/src/app/app.component.ts index 02a1328f17..83af6bd897 100644 --- a/aio/content/examples/event-binding/src/app/app.component.ts +++ b/aio/content/examples/event-binding/src/app/app.component.ts @@ -11,7 +11,7 @@ export class AppComponent { currentItem = { name: 'teapot'} ; clickMessage = ''; - onSave(event?: KeyboardEvent) { + onSave(event?: MouseEvent) { const evtMsg = event ? ' Event target is ' + (event.target as HTMLElement).textContent : ''; alert('Saved.' + evtMsg); if (event) { event.stopPropagation(); } @@ -21,9 +21,14 @@ export class AppComponent { alert(`Delete the ${item.name}.`); } - onClickMe(event?: KeyboardEvent) { + onClickMe(event?: MouseEvent) { const evtMsg = event ? ' Event target class is ' + (event.target as HTMLElement).className : ''; alert('Click me.' + evtMsg); } + // #docregion getValue + getValue(target: EventTarget): string { + return (target as HTMLInputElement).value; + } + // #enddocregion getValue } diff --git a/aio/content/examples/getting-started/src/app/cart.service.ts b/aio/content/examples/getting-started/src/app/cart.service.ts index b28b22f351..999a13d8b8 100644 --- a/aio/content/examples/getting-started/src/app/cart.service.ts +++ b/aio/content/examples/getting-started/src/app/cart.service.ts @@ -1,14 +1,15 @@ // #docplaster // #docregion import-http import { Injectable } from '@angular/core'; - import { HttpClient } from '@angular/common/http'; // #enddocregion import-http + @Injectable({ providedIn: 'root' }) // #docregion props, methods, inject-http, get-shipping export class CartService { +// #enddocregion get-shipping items = []; // #enddocregion props, methods @@ -32,8 +33,10 @@ export class CartService { } // #enddocregion methods +// #docregion get-shipping getShippingPrices() { - return this.http.get('/assets/shipping.json'); + return this.http.get<{type: string, price: number}[]>('/assets/shipping.json'); } // #docregion props, methods, inject-http } +// #enddocregion props, methods, inject-http diff --git a/aio/content/examples/http/src/app/package-search/package-search.component.html b/aio/content/examples/http/src/app/package-search/package-search.component.html index b1bd56d561..bac14b8cdd 100644 --- a/aio/content/examples/http/src/app/package-search/package-search.component.html +++ b/aio/content/examples/http/src/app/package-search/package-search.component.html @@ -2,7 +2,7 @@

Search Npm Packages

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 @@ button - -
- -
+ + +

is 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. +
+ +The type of `$event.target` is only `EventTarget` in the template. +In the `getValue()` method, the target is cast to an `HTMLInputElement` to allow type-safe access to its `value` property. + + + +
diff --git a/aio/content/guide/http.md b/aio/content/guide/http.md index 87ffcca7aa..e261b3451a 100644 --- a/aio/content/guide/http.md +++ b/aio/content/guide/http.md @@ -978,6 +978,16 @@ a search request for a package with that name to the npm web API. Here, the `keyup` event binding sends every keystroke to the component's `search()` method. + +
+ +The type of `$event.target` is only `EventTarget` in the template. +In the `getValue()` method, the target is cast to an `HTMLInputElement` to allow type-safe access to its `value` property. + + + +
+ The following snippet implements debouncing for this input using RxJS operators.