build(docs-infra): implement full template checking for examples

This commit turns on full template type checking and fixes the examples
that had errors.

aio/content/examples/built-in-directives/src/app/app.component.html

@@ -1,3 +1,4 @@
+<!-- #docplaster -->
 <h1>Built-in Directives</h1>
 
 <h2>Built-in attribute directives</h2>
@@ -8,7 +9,7 @@ <h3 id="ngModel">NgModel (two-way) Binding</h3>
   <p>Current item name: {{currentItem.name}}</p>
   <p>
     <label for="without">without NgModel:</label>
-    <input [value]="currentItem.name" (input)="currentItem.name=$event.target.value" id="without">
+    <input [value]="currentItem.name" (input)="currentItem.name=getValue($event.target)" id="without">
   </p>
 
   <p>

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;
+  }
 }
 
 

aio/content/examples/built-in-directives/src/app/app.module.ts

@@ -1,3 +1,4 @@
+// #docplaster
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 // #docregion import-forms-module

aio/content/examples/event-binding/src/app/app.component.html

@@ -20,9 +20,9 @@ <h4>Result: {{currentItem.name}}</h4>
 
   <!-- #docregion event-binding-3-->
   <input [value]="currentItem.name"
-         (input)="currentItem.name=$event.target.value" >
-  without NgModel
+         (input)="currentItem.name=getValue($event.target)">
   <!-- #enddocregion event-binding-3-->
+  without NgModel
 </div>
 
 <div class="group">

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
 }

aio/content/examples/getting-started/src/app/cart.service.ts

@@ -1,14 +1,18 @@
 // #docplaster
-// #docregion import-http
+// #docregion import-http, props
+// #enddocregion props
 import { Injectable } from '@angular/core';
-
 import { HttpClient } from '@angular/common/http';
 // #enddocregion import-http
+// #docregion get-shipping-import
+import { Observable } from 'rxjs';
+// #enddocregion get-shipping-import
 @Injectable({
   providedIn: 'root'
 })
 // #docregion props, methods, inject-http, get-shipping
 export class CartService {
+// #enddocregion get-shipping
   items = [];
 // #enddocregion props, methods
 
@@ -32,8 +36,15 @@ export class CartService {
   }
 // #enddocregion methods
 
+// #docregion get-shipping
   getShippingPrices() {
-    return this.http.get('/assets/shipping.json');
+    return this.http.get('/assets/shipping.json') as Observable<ShippingPrice[]>;
   }
 // #docregion props, methods, inject-http
 }
+// #enddocregion props, methods, inject-http
+
+export interface ShippingPrice {
+  type: string;
+  price: number;
+}

aio/content/examples/http/src/app/package-search/package-search.component.html

@@ -2,7 +2,7 @@
 <h3>Search Npm Packages</h3>
 <p><i>Searches when typing stops. Caches for 30 seconds.</i></p>
 <!-- #docregion search -->
-<input (keyup)="search($event.target.value)" id="name" placeholder="Search"/>
+<input (keyup)="search(getValue($event.target))" id="name" placeholder="Search"/>
 <!-- #enddocregion search -->
 <input type="checkbox" id="refresh" [checked]="withRefresh" (click)="toggleRefresh()">
 <label for="refresh">with refresh</label>

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
 }

aio/content/examples/pipes/src/app/heroes.ts

@@ -1,4 +1,4 @@
-export interface Flyer { canFly: boolean; }
+export interface Flyer { name: string; canFly: boolean; }
 export const HEROES =  [
   {name: 'Windstorm', canFly: true},
   {name: 'Bombasto',  canFly: false},

aio/content/examples/template-syntax/src/app/app.component.html

@@ -220,10 +220,10 @@ <h3>
 <img bind-src="heroImageUrl">
 
 <!-- ERROR: HeroDetailComponent.hero expects a
-     Hero object, not the string "currentHero" -->
+     Hero object, not the string "currentHero"
 <div *ngIf="false">
   <app-hero-detail hero="currentHero"></app-hero-detail>
-</div>
+</div> -->
 <app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
 
 <p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>

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 `<input>` 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.
 
+<div class="alert is-helpful">
+
+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.
+
+<code-example path="event-binding/src/app/app.component.ts" region="getValue"></code-example>
+
+</div>

aio/content/guide/http.md

@@ -978,6 +978,16 @@ a search request for a package with that name to the npm web API.
 </code-example>
 
 Here, the `keyup` event binding sends every keystroke to the component's `search()` method.
+
+<div class="alert is-helpful">
+
+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.
+
+<code-example path="http/src/app/package-search/package-search.component.ts" region="getValue"></code-example>
+
+</div>
+
 The following snippet implements debouncing for this input using RxJS operators.
 
 <code-example

aio/content/start/start-data.md

@@ -214,7 +214,11 @@ The next step is to inject the `HttpClient` service into your service so your ap
 
 To get shipping data, from `shipping.json`, You can use the `HttpClient` `get()` method.
 
-1. In `cart.service.ts`, below the `clearCart()` method, define a new `getShippingPrices()` method that uses the `HttpClient` `get()` method.
+1. In `cart.service.ts`, import `Observable` from the `rxjs` package.
+
+    <code-example header="src/app/cart.service.ts" path="getting-started/src/app/cart.service.ts" region="get-shipping-import"></code-example>
+
+1. Below the `clearCart()` method, define a new `getShippingPrices()` method that uses the `HttpClient` `get()` method, casting the result to an observable of an array `ShippingPrice` object.
 
     <code-example header="src/app/cart.service.ts" path="getting-started/src/app/cart.service.ts" region="get-shipping"></code-example>
 

aio/tools/examples/shared/boilerplate/cli/tsconfig.json

@@ -25,7 +25,6 @@
   "angularCompilerOptions": {
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    // TODO(gkalpak): Fix the code and enable this (i.e. switch from `fullTemplateTypeCheck` to `strictTemplates`).
-    "fullTemplateTypeCheck": true,// "strictTemplates": true
+    "strictTemplates": true
   }
 }