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 @@
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.
-
+
with refresh
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.