docs: make all examples compatible with strict mode (#41999)

Turns on the `strict` compiler flag and resolves the compilation errors in the various AIO examples.

PR Close #41999

aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts

@@ -89,7 +89,7 @@ describe('AngularJS to Angular Quick Reference Tests', () => {
     return element.all(by.css('app-movie-list tbody > tr'));
   }
 
-  async function testFavoriteHero(heroName: string, expectedLabel: string) {
+  async function testFavoriteHero(heroName: string | null, expectedLabel: string) {
     const movieListComp = element(by.tagName('app-movie-list'));
     const heroInput = movieListComp.element(by.tagName('input'));
     const favoriteHeroLabel = movieListComp.element(by.tagName('h3'));

aio/content/examples/ajs-quick-reference/src/app/app.component.ts

@@ -16,7 +16,7 @@ export class AppComponent {
   eventType = '<not clicked yet>';
   isActive = true;
   isImportant = true;
-  movie: IMovie = null;
+  movie: IMovie;
   movies: IMovie[] = [];
   showImage = true;
   title = 'AngularJS to Angular Quick Ref Cookbook';

aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts

@@ -1,4 +1,3 @@
-/* tslint:disable:no-unused-variable */
 // #docplaster
 import { Component } from '@angular/core';
 import { IMovie } from './movie';
@@ -16,7 +15,7 @@ import { MovieService } from './movie.service';
 // #docregion class
 export class MovieListComponent {
 // #enddocregion class
-  favoriteHero: string;
+  favoriteHero: string | undefined;
   showImage = false;
   movies: IMovie[];
 

aio/content/examples/animations/src/app/hero-list-auto.component.ts

@@ -31,7 +31,7 @@ import { Hero } from './hero';
   // #enddocregion auto-calc
 })
 export class HeroListAutoComponent {
-   @Input() heroes: Hero[];
+   @Input() heroes: Hero[] = [];
 
    @Output() remove = new EventEmitter<number>();
 

aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts

@@ -44,7 +44,7 @@ import { Hero } from './hero';
   // #enddocregion animationdef
 })
 export class HeroListEnterLeaveComponent {
-  @Input() heroes: Hero[];
+  @Input() heroes: Hero[] = [];
 
   @Output() remove = new EventEmitter<number>();
 

aio/content/examples/animations/src/app/hero-list-groups.component.ts

@@ -64,7 +64,7 @@ import { Hero } from './hero';
   // #enddocregion animationdef
 })
 export class HeroListGroupsComponent {
-   @Input() heroes: Hero[];
+   @Input() heroes: Hero[] = [];
 
    @Output() remove = new EventEmitter<number>();
 

aio/content/examples/animations/src/app/hero-list-page.component.ts

@@ -4,6 +4,7 @@
 import { Component, HostBinding, OnInit } from '@angular/core';
 import { trigger, transition, animate, style, query, stagger } from '@angular/animations';
 import { HEROES } from './mock-heroes';
+import { Hero } from './hero';
 
 // #docregion filter-animations
 @Component({
@@ -58,7 +59,7 @@ export class HeroListPageComponent implements OnInit {
   heroTotal = -1;
 // #enddocregion filter-animations
   get heroes() { return this._heroes; }
-  private _heroes = [];
+  private _heroes: Hero[] = [];
 
   ngOnInit() {
     this._heroes = HEROES;

aio/content/examples/architecture/src/app/hero-detail.component.ts

@@ -7,5 +7,5 @@ import { Hero } from './hero';
   templateUrl: './hero-detail.component.html'
 })
 export class HeroDetailComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }

aio/content/examples/architecture/src/app/hero-list.component.ts

@@ -13,8 +13,8 @@ import { HeroService } from './hero.service';
 // #docregion class
 export class HeroListComponent implements OnInit {
   // #enddocregion metadata
-  heroes: Hero[];
+  heroes: Hero[] = [];
-  selectedHero: Hero;
+  selectedHero: Hero | undefined;
 
   // #docregion ctor
   constructor(private service: HeroService) { }

aio/content/examples/attribute-directives/src/app/app.component.ts

@@ -7,5 +7,5 @@ import { Component } from '@angular/core';
 })
 // #docregion class
 export class AppComponent {
-  color: string;
+  color = '';
 }

aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts

@@ -19,7 +19,7 @@ export class HighlightDirective {
   }
 
   @HostListener('mouseleave') onMouseLeave() {
-    this.highlight(null);
+    this.highlight('');
   }
 
   private highlight(color: string) {

aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts

@@ -11,7 +11,7 @@ export class HighlightDirective {
   constructor(private el: ElementRef) { }
 
   // #docregion input
-  @Input() appHighlight: string;
+  @Input() appHighlight = '';
   // #enddocregion input
 
   @HostListener('mouseenter') onMouseEnter() {
@@ -19,7 +19,7 @@ export class HighlightDirective {
   }
 
   @HostListener('mouseleave') onMouseLeave() {
-    this.highlight(null);
+    this.highlight('');
   }
 
   private highlight(color: string) {

aio/content/examples/attribute-directives/src/app/highlight.directive.ts

@@ -9,10 +9,10 @@ export class HighlightDirective {
   constructor(private el: ElementRef) { }
 
   // #docregion defaultColor
-  @Input() defaultColor: string;
+  @Input() defaultColor = '';
   // #enddocregion defaultColor
 
-  @Input('appHighlight') highlightColor: string;
+  @Input('appHighlight') highlightColor = '';
 
   // #docregion mouse-enter
   @HostListener('mouseenter') onMouseEnter() {
@@ -21,7 +21,7 @@ export class HighlightDirective {
   // #enddocregion mouse-enter
 
   @HostListener('mouseleave') onMouseLeave() {
-    this.highlight(null);
+    this.highlight('');
   }
 
   private highlight(color: string) {

aio/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts

@@ -7,7 +7,7 @@ describe('Binding syntax e2e tests', () => {
 
 
   // helper function used to test what's logged to the console
-  async function logChecker(contents) {
+  async function logChecker(contents: string) {
     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
     const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false);
     expect(messages.length).toBeGreaterThan(0);

aio/content/examples/binding-syntax/src/app/app.component.ts

@@ -8,7 +8,7 @@ import { Component, ViewChild, ElementRef } from '@angular/core';
 })
 export class AppComponent {
 
-  @ViewChild('bindingInput') bindingInput: ElementRef;
+  @ViewChild('bindingInput') bindingInput!: ElementRef;
 
   isUnchanged = true;
 

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

@@ -8,7 +8,7 @@
   <p>Current item name: {{currentItem.name}}</p>
   <p>
     <label for="without">without NgModel:</label>
-    <input [value]="currentItem.name" (input)="currentItem.name=getValue($event.target)" id="without">
+    <input [value]="currentItem.name" (input)="currentItem.name=getValue($event)" id="without">
   </p>
 
   <p>

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

@@ -13,16 +13,16 @@ export class AppComponent implements OnInit {
   isUnchanged = true;
 
   isActive = true;
-  nullCustomer = null;
+  nullCustomer: string | null = null;
   currentCustomer = {
     name: 'Laura'
   };
 
-  item: Item; // defined to demonstrate template context precedence
+  item!: Item; // defined to demonstrate template context precedence
-  items: Item[];
+  items: Item[] = [];
 
   // #docregion item
-  currentItem: Item;
+  currentItem!: Item;
   // #enddocregion item
 
 
@@ -34,11 +34,11 @@ export class AppComponent implements OnInit {
   itemIdIncrement = 1;
 
   // #docregion setClasses
-  currentClasses: {};
+  currentClasses: Record<string, boolean> = {};
   // #enddocregion setClasses
 
   // #docregion setStyles
-  currentStyles: {};
+  currentStyles: Record<string, string> = {};
   // #enddocregion setStyles
 
   ngOnInit() {
@@ -114,8 +114,8 @@ export class AppComponent implements OnInit {
 
   trackById(index: number, item: any): number { return item.id; }
 
-  getValue(target: EventTarget): string {
+  getValue(event: Event): string {
-    return (target as HTMLInputElement).value;
+    return (event.target as HTMLInputElement).value;
   }
 }
 

aio/content/examples/built-in-directives/src/app/item-detail/item-detail.component.ts

@@ -10,7 +10,7 @@ import { Item } from '../item';
 export class ItemDetailComponent {
 
 
-  @Input() item: Item;
+  @Input() item!: Item;
 
   constructor() { }
 

aio/content/examples/built-in-directives/src/app/item-switch.component.ts

@@ -8,7 +8,7 @@ import { Item } from './item';
 
 // #docregion input
 export class StoutItemComponent {
-  @Input() item: Item;
+  @Input() item!: Item;
 }
 // #enddocregion input
 
@@ -18,7 +18,7 @@ export class StoutItemComponent {
   template: `This is the brightest {{item.name}} in town.`
 })
 export class BestItemComponent {
-  @Input() item: Item;
+  @Input() item!: Item;
 }
 
 @Component({
@@ -26,7 +26,7 @@ export class BestItemComponent {
   template: `Which is the slimmest {{item.name}}?`
 })
 export class DeviceItemComponent {
-  @Input() item: Item;
+  @Input() item!: Item;
 }
 
 @Component({
@@ -34,7 +34,7 @@ export class DeviceItemComponent {
   template: `Has anyone seen my {{item.name}}?`
 })
 export class LostItemComponent {
-  @Input() item: Item;
+  @Input() item!: Item;
 }
 
 @Component({
@@ -42,7 +42,7 @@ export class LostItemComponent {
   template: `{{message}}`
 })
 export class UnknownItemComponent {
-  @Input() item: Item;
+  @Input() item!: Item;
   get message() {
     return this.item && this.item.name ?
       `${this.item.name} is strange and mysterious.` :

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

@@ -3,7 +3,7 @@ export class Item {
 
   static items: Item[] = [
     new Item(
-      null,
+      0,
       'Teapot',
       'stout'
     ),
@@ -15,7 +15,7 @@ export class Item {
 
 
   constructor(
-    public id?: number,
+    public id: number,
     public name?: string,
     public feature?: string,
     public url?: string,
@@ -25,6 +25,6 @@ export class Item {
   }
 
   clone(): Item {
-    return Object.assign(new Item(), this);
+    return Object.assign(new Item(this.id), this);
   }
 }

aio/content/examples/comparing-observables/src/observables.spec.ts

@@ -2,11 +2,11 @@ import { docRegionChain, docRegionObservable, docRegionUnsubscribe } from './obs
 
 describe('observables', () => {
   it('should print 2', (doneFn: DoneFn) => {
-    const consoleLogSpy = spyOn(console, 'log');
+    const consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
-    const observable = docRegionObservable(console);
+    const observable = docRegionObservable(consoleSpy);
     observable.subscribe(() => {
-      expect(consoleLogSpy).toHaveBeenCalledTimes(1);
+      expect(consoleSpy.log).toHaveBeenCalledTimes(1);
-      expect(consoleLogSpy).toHaveBeenCalledWith(2);
+      expect(consoleSpy.log).toHaveBeenCalledWith(2);
       doneFn();
     });
   });

aio/content/examples/comparing-observables/src/promises.spec.ts

@@ -2,11 +2,11 @@ import { docRegionError, docRegionPromise } from './promises';
 
 describe('promises', () => {
   it('should print 2', (doneFn: DoneFn) => {
-    const consoleLogSpy = spyOn(console, 'log');
+    const consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
-    const pr = docRegionPromise(console, 2);
+    const pr = docRegionPromise(consoleSpy, 2);
     pr.then((value) => {
-      expect(consoleLogSpy).toHaveBeenCalledTimes(1);
+      expect(consoleSpy.log).toHaveBeenCalledTimes(1);
-      expect(consoleLogSpy).toHaveBeenCalledWith(2);
+      expect(consoleSpy.log).toHaveBeenCalledWith(2);
       expect(value).toBe(4);
       doneFn();
     });

aio/content/examples/comparing-observables/src/promises.ts

@@ -3,7 +3,7 @@
 export function docRegionPromise(console: Console, inputValue: number) {
   // #docregion promise
   // initiate execution
-  let promise = new Promise<number>((resolve, reject) => {
+  let promise = new Promise<number>(resolve => {
     // Executer fn...
     // #enddocregion promise
     // The below is used in the unit tests.

aio/content/examples/component-interaction/src/app/astronaut.component.ts

@@ -18,7 +18,7 @@ import { Subscription } from 'rxjs';
   `
 })
 export class AstronautComponent implements OnDestroy {
-  @Input() astronaut: string;
+  @Input() astronaut = '';
   mission = '<no mission announced>';
   confirmed = false;
   announced = false;

aio/content/examples/component-interaction/src/app/countdown-parent.component.ts

@@ -40,7 +40,7 @@ export class CountdownLocalVarParentComponent { }
 export class CountdownViewChildParentComponent implements AfterViewInit {
 
   @ViewChild(CountdownTimerComponent)
-  private timerComponent: CountdownTimerComponent;
+  private timerComponent!: CountdownTimerComponent;
 
   seconds() { return 0; }
 

aio/content/examples/component-interaction/src/app/hero-child.component.ts

@@ -11,7 +11,7 @@ import { Hero } from './hero';
   `
 })
 export class HeroChildComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
-  @Input('master') masterName: string; // tslint:disable-line: no-input-rename
+  @Input('master') masterName = ''; // tslint:disable-line: no-input-rename
 }
 // #enddocregion

aio/content/examples/component-interaction/src/app/version-child.component.ts

@@ -13,8 +13,8 @@ import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
   `
 })
 export class VersionChildComponent implements OnChanges {
-  @Input() major: number;
+  @Input() major = 0;
-  @Input() minor: number;
+  @Input() minor = 0;
   changeLog: string[] = [];
 
   ngOnChanges(changes: SimpleChanges) {

aio/content/examples/component-interaction/src/app/voter.component.ts

@@ -10,7 +10,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   `
 })
 export class VoterComponent {
-  @Input()  name: string;
+  @Input()  name = '';
   @Output() voted = new EventEmitter<boolean>();
   didVote = false;
 

aio/content/examples/component-styles/src/app/hero-app-main.component.ts

@@ -12,5 +12,5 @@ import { Hero } from './hero';
   `
 })
 export class HeroAppMainComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }

aio/content/examples/component-styles/src/app/hero-controls.component.ts

@@ -17,7 +17,7 @@ import { Hero } from './hero';
 })
 // #enddocregion inlinestyles
 export class HeroControlsComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 
   activate() {
     this.hero.active = true;

aio/content/examples/component-styles/src/app/hero-details.component.ts

@@ -11,5 +11,5 @@ import { Hero } from './hero';
   styleUrls: ['./hero-details.component.css']
 })
 export class HeroDetailsComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }

aio/content/examples/component-styles/src/app/hero-team.component.ts

@@ -16,5 +16,5 @@ import { Hero } from './hero';
 })
 // #enddocregion stylelink
 export class HeroTeamComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }

aio/content/examples/component-styles/src/app/hero.ts

@@ -1,5 +1,5 @@
 export class Hero {
-  active: boolean;
+  active = false;
 
   constructor(public name: string,
               public team: string[]) {

aio/content/examples/content-projection/src/app/app.component.ts

@@ -37,6 +37,6 @@ export class ZippyComponent {
   contentId = `zippy-${nextId++}`;
   @Input() expanded = false;
   // #docregion contentchild
-  @ContentChild(ZippyContentDirective) content: ZippyContentDirective;
+  @ContentChild(ZippyContentDirective) content!: ZippyContentDirective;
   // #enddocregion contentchild
 }

aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts

@@ -1,4 +1,4 @@
-import { browser, element, by } from 'protractor';
+import { browser, element, by, ElementFinder } from 'protractor';
 
 describe('Dependency Injection Cookbook', () => {
 
@@ -19,7 +19,7 @@ describe('Dependency Injection Cookbook', () => {
       expect(await sortedHeroes.isPresent()).toBe(true);
 
       const sortedHeroElems = element.all(by.css('app-sorted-heroes div'));
-      const sortedHeroNames = await sortedHeroElems.map(elem => elem.getText());
+      const sortedHeroNames = await sortedHeroElems.map(elem => elem?.getText());
       expect(sortedHeroNames).toEqual(['Dr Nice', 'Magma', 'RubberMan']);
     });
 

aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts

@@ -16,7 +16,7 @@ import { HeroCacheService } from './hero-cache.service';
 })
 
 export class HeroBioComponent implements OnInit  {
-  @Input() heroId: number;
+  @Input() heroId = 0;
 
   constructor(private heroCache: HeroCacheService) { }
 

aio/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts

@@ -7,7 +7,7 @@ import { HeroService } from './hero.service';
 // #docregion service
 @Injectable()
 export class HeroCacheService {
-  hero: Hero;
+  hero!: Hero;
   constructor(private heroService: HeroService) {}
 
   fetchCachedHero(id: number) {

aio/content/examples/dependency-injection-in-action/src/app/hero.service.ts

@@ -15,7 +15,7 @@ export class HeroService {
  ];
 
   getHeroById(id: number): Hero {
-    return this.heroes.find(hero => hero.id === id);
+    return this.heroes.find(hero => hero.id === id)!;
   }
 
   getAllHeroes(): Array<Hero> {

aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts

@@ -7,7 +7,7 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 })
 export class HighlightDirective {
 
-  @Input('appHighlight') highlightColor: string;
+  @Input('appHighlight') highlightColor = '';
 
   private el: HTMLElement;
 
@@ -20,7 +20,7 @@ export class HighlightDirective {
   }
 
   @HostListener('mouseleave') onMouseLeave() {
-    this.highlight(null);
+    this.highlight('');
   }
 
   private highlight(color: string) {

aio/content/examples/dependency-injection-in-action/src/app/minimal-logger.service.ts

@@ -2,8 +2,8 @@
 // Class used as a "narrowing" interface that exposes a minimal logger
 // Other members of the actual implementation are invisible
 export abstract class MinimalLogger {
-  logs: string[];
+  abstract logs: string[];
-  logInfo: (msg: string) => void;
+  abstract logInfo: (msg: string) => void;
 }
 // #enddocregion
 

aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts

@@ -8,7 +8,7 @@ export abstract class Base { name = 'Count Basie'; }
 
 // Marker class, used as an interface
 // #docregion parent
-export abstract class Parent { name: string; }
+export abstract class Parent { abstract name: string; }
 // #enddocregion parent
 
 const DifferentParent = Parent;

aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts

@@ -15,7 +15,7 @@ import { HeroService } from './hero.service';
 export class HeroesBaseComponent implements OnInit {
   constructor(private heroService: HeroService) { }
 
-  heroes: Array<Hero>;
+  heroes: Hero[] = [];
 
   ngOnInit() {
     this.heroes = this.heroService.getAllHeroes();

aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts

@@ -7,8 +7,8 @@ import { UserService } from './user.service';
   providedIn: 'root'
 })
 export class UserContextService {
-  name: string;
+  name = '';
-  role: string;
+  role = '';
   loggedInSince: Date;
 
   constructor(private userService: UserService, private loggerService: LoggerService) {

aio/content/examples/dependency-injection/src/app/injector.component.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import { Component, Injector, OnInit } from '@angular/core';
+import { Component, Injector } from '@angular/core';
 
 import { Car, Engine, Tires } from './car/car';
 import { Hero } from './heroes/hero';
@@ -18,7 +18,7 @@ import { Logger } from './logger.service';
   `,
   providers: [Car, Engine, Tires, heroServiceProvider, Logger]
 })
-export class InjectorComponent implements OnInit {
+export class InjectorComponent {
   car: Car;
 
   // #docregion get-hero-service
@@ -26,9 +26,7 @@ export class InjectorComponent implements OnInit {
   // #enddocregion get-hero-service
   hero: Hero;
 
-  constructor(private injector: Injector) { }
+  constructor(private injector: Injector) {
-
-  ngOnInit() {
     this.car = this.injector.get(Car);
     this.heroService = this.injector.get(HeroService);
     this.hero = this.heroService.getHeroes()[0];

aio/content/examples/dependency-injection/src/app/providers.component.ts

@@ -210,7 +210,7 @@ export class Provider8Component {
   // #enddocregion providers-9
 })
 export class Provider9Component implements OnInit {
-  log: string;
+  log = '';
   /*
    // #docregion provider-9-ctor-interface
    // Can't inject using the interface as the parameter type
@@ -237,7 +237,7 @@ const someMessage = 'Hello from the injected logger';
   providers: [{ provide: Logger, useValue: null }]
 })
 export class Provider10Component implements OnInit {
-  log: string;
+  log = '';
   constructor(@Optional() private logger?: Logger) {
     if (this.logger) {
       this.logger.log(someMessage);

aio/content/examples/docs-style-guide/src/app/app.component.ts

@@ -13,7 +13,7 @@ export class AppComponent {
 // #enddocregion class-skeleton
   title = 'Authors Style Guide Sample';
   heroes = HEROES;
-  selectedHero: Hero;
+  selectedHero!: Hero;
 
   onSelect(hero: Hero): void {
     this.selectedHero = hero;

aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts

@@ -18,9 +18,9 @@ import { AdComponent } from './ad.component';
 })
 // #docregion class
 export class AdBannerComponent implements OnInit, OnDestroy {
-  @Input() ads: AdItem[];
+  @Input() ads: AdItem[] = [];
   currentAdIndex = -1;
-  @ViewChild(AdDirective, {static: true}) adHost: AdDirective;
+  @ViewChild(AdDirective, {static: true}) adHost!: AdDirective;
   interval: any;
 
   constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

aio/content/examples/dynamic-component-loader/src/app/app.component.ts

@@ -13,7 +13,7 @@ import { AdItem } from './ad-item';
   `
 })
 export class AppComponent implements OnInit {
-  ads: AdItem[];
+  ads: AdItem[] = [];
 
   constructor(private adService: AdService) {}
 

aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts

@@ -9,7 +9,7 @@ import { QuestionBase } from './question-base';
   templateUrl: './dynamic-form-question.component.html'
 })
 export class DynamicFormQuestionComponent {
-  @Input() question: QuestionBase<string>;
+  @Input() question!: QuestionBase<string>;
-  @Input() form: FormGroup;
+  @Input() form!: FormGroup;
   get isValid() { return this.form.controls[this.question.key].valid; }
 }

aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts

@@ -12,14 +12,14 @@ import { QuestionControlService } from './question-control.service';
 })
 export class DynamicFormComponent implements OnInit {
 
-  @Input() questions: QuestionBase<string>[] = [];
+  @Input() questions: QuestionBase<string>[] | null = [];
-  form: FormGroup;
+  form!: FormGroup;
   payLoad = '';
 
-  constructor(private qcs: QuestionControlService) {  }
+  constructor(private qcs: QuestionControlService) {}
 
   ngOnInit() {
-    this.form = this.qcs.toFormGroup(this.questions);
+    this.form = this.qcs.toFormGroup(this.questions as QuestionBase<string>[]);
   }
 
   onSubmit() {

aio/content/examples/dynamic-form/src/app/question-base.ts

@@ -1,6 +1,6 @@
 // #docregion
 export class QuestionBase<T> {
-  value: T;
+  value: T|undefined;
   key: string;
   label: string;
   required: boolean;

aio/content/examples/elements/src/app/popup.component.ts

@@ -47,7 +47,7 @@ export class PopupComponent {
     this._message = message;
     this.state = 'opened';
   }
-  private _message: string;
+  private _message = '';
 
   @Output()
   closed = new EventEmitter();

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

@@ -20,7 +20,7 @@
 
   <!-- #docregion event-binding-3-->
   <input [value]="currentItem.name"
-         (input)="currentItem.name=getValue($event.target)">
+         (input)="currentItem.name=getValue($event)">
   <!-- #enddocregion event-binding-3-->
   without NgModel
 </div>

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

@@ -27,8 +27,8 @@ export class AppComponent {
   }
 
   // #docregion getValue
-  getValue(target: EventTarget): string {
+  getValue(event: Event): string {
-    return (target as HTMLInputElement).value;
+    return (event.target as HTMLInputElement).value;
   }
   // #enddocregion getValue
 }

aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts

@@ -10,7 +10,7 @@ import { Item } from '../item';
 })
 export class ItemDetailComponent {
 
-  @Input() item;
+  @Input() item!: Item;
   itemImageUrl = 'assets/teapot.svg';
   lineThrough = '';
   displayNone = '';

aio/content/examples/event-binding/src/app/item.ts

@@ -1,4 +1,4 @@
 export class Item {
-  name: '';
+  name = '';
 }
 

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html

@@ -18,13 +18,13 @@
           <div *ngIf="name.invalid && (name.dirty || name.touched)"
               class="alert alert-danger">
 
-            <div *ngIf="name.errors.required">
+            <div *ngIf="name.errors?.required">
               Name is required.
             </div>
-            <div *ngIf="name.errors.minlength">
+            <div *ngIf="name.errors?.minlength">
               Name must be at least 4 characters long.
             </div>
-            <div *ngIf="name.errors.forbiddenName">
+            <div *ngIf="name.errors?.forbiddenName">
               Name cannot be Bob.
             </div>
           </div>
@@ -59,7 +59,7 @@
         </select>
 
         <div *ngIf="power.invalid && power.touched" class="alert alert-danger">
-          <div *ngIf="power.errors.required">Power is required.</div>
+          <div *ngIf="power.errors?.required">Power is required.</div>
         </div>
       </div>
 

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts

@@ -17,7 +17,7 @@ export class HeroFormReactiveComponent implements OnInit {
 
   hero = { name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0] };
 
-  heroForm: FormGroup;
+  heroForm!: FormGroup;
 
   ngOnInit(): void {
     this.heroForm = new FormGroup({
@@ -34,11 +34,11 @@ export class HeroFormReactiveComponent implements OnInit {
     },  { validators: identityRevealedValidator }); // <-- add custom validator at the FormGroup level
   }
 
-  get name() { return this.heroForm.get('name'); }
+  get name() { return this.heroForm.get('name')!; }
 
-  get power() { return this.heroForm.get('power'); }
+  get power() { return this.heroForm.get('power')!; }
 
-  get alterEgo() { return this.heroForm.get('alterEgo'); }
+  get alterEgo() { return this.heroForm.get('alterEgo')!; }
 
   constructor(private alterEgoValidator: UniqueAlterEgoValidator) { }
 }

aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts

@@ -20,7 +20,7 @@ export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
   // #enddocregion directive-providers
 })
 export class ForbiddenValidatorDirective implements Validator {
-  @Input('appForbiddenName') forbiddenName: string;
+  @Input('appForbiddenName') forbiddenName = '';
 
   validate(control: AbstractControl): ValidationErrors | null {
     return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)

aio/content/examples/form-validation/src/app/shared/identity-revealed.directive.ts

@@ -18,7 +18,7 @@ export const identityRevealedValidator: ValidatorFn = (control: AbstractControl)
   providers: [{ provide: NG_VALIDATORS, useExisting: IdentityRevealedValidatorDirective, multi: true }]
 })
 export class IdentityRevealedValidatorDirective implements Validator {
-  validate(control: AbstractControl): ValidationErrors {
+  validate(control: AbstractControl): ValidationErrors | null {
     return identityRevealedValidator(control);
   }
 }

aio/content/examples/form-validation/src/app/template/hero-form-template.component.html

@@ -19,13 +19,13 @@
           <div *ngIf="name.invalid && (name.dirty || name.touched)"
               class="alert">
 
-            <div *ngIf="name.errors.required">
+            <div *ngIf="name.errors?.required">
               Name is required.
             </div>
-            <div *ngIf="name.errors.minlength">
+            <div *ngIf="name.errors?.minlength">
               Name must be at least 4 characters long.
             </div>
-            <div *ngIf="name.errors.forbiddenName">
+            <div *ngIf="name.errors?.forbiddenName">
               Name cannot be Bob.
             </div>
 

aio/content/examples/getting-started/e2e/src/app.e2e-spec.ts

@@ -65,7 +65,7 @@ describe('Getting Started', () => {
       await pageElements.productListLinks.get(0).click();
 
       const product = pageElements.productDetailsPage;
-      const buyButton = await product.element(by.css('button'));
+      const buyButton = product.element(by.css('button'));
       const checkoutLink = pageElements.topBarCheckoutLink;
 
       await buyButton.click();
@@ -89,12 +89,12 @@ describe('Getting Started', () => {
 
       const checkoutLink = pageElements.topBarCheckoutLink;
       const productDetailsPage = pageElements.productDetailsPage;
-      const buyButton = await productDetailsPage.element(by.css('button'));
+      const buyButton = productDetailsPage.element(by.css('button'));
 
       const cartPage = pageElements.cartPage;
       const inputFields = cartPage.all(by.css('form input'));
 
-      const purchaseButton = await cartPage.element(by.css('button'));
+      const purchaseButton = cartPage.element(by.css('button'));
       const nameField = inputFields.get(0);
       const addressField = inputFields.get(1);
 

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

@@ -2,6 +2,7 @@
 // #docregion import-http
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Product } from './products';
 // #enddocregion import-http
 
 @Injectable({
@@ -10,7 +11,7 @@ import { HttpClient } from '@angular/common/http';
 // #docregion props, methods, inject-http, get-shipping
 export class CartService {
 // #enddocregion get-shipping
-  items = [];
+  items: Product[] = [];
 // #enddocregion props, methods
 
   constructor(
@@ -19,7 +20,7 @@ export class CartService {
 // #enddocregion inject-http
 // #docregion methods
 
-  addToCart(product) {
+  addToCart(product: Product) {
     this.items.push(product);
   }
 

aio/content/examples/getting-started/src/app/product-alerts/product-alerts.component.1.ts

@@ -3,6 +3,7 @@
 import { Component, OnInit } from '@angular/core';
 // #enddocregion as-generated
 import { Input } from '@angular/core';
+import { Product } from '../products';
 // #enddocregion imports
 // #docregion as-generated
 
@@ -14,7 +15,7 @@ import { Input } from '@angular/core';
 // #docregion input-decorator
 export class ProductAlertsComponent implements OnInit {
 // #enddocregion as-generated
-  @Input() product;
+  @Input() product!: Product;
 // #docregion as-generated
   constructor() { }
 

aio/content/examples/getting-started/src/app/product-alerts/product-alerts.component.ts

@@ -3,6 +3,7 @@
 import { Component } from '@angular/core';
 import { Input } from '@angular/core';
 import { Output, EventEmitter } from '@angular/core';
+import { Product } from '../products';
 // #enddocregion imports
 
 @Component({
@@ -12,6 +13,6 @@ import { Output, EventEmitter } from '@angular/core';
 })
 // #docregion input-output
 export class ProductAlertsComponent {
-  @Input() product;
+  @Input() product!: Product;
   @Output() notify = new EventEmitter();
 }

aio/content/examples/getting-started/src/app/product-details/product-details.component.1.ts

@@ -3,7 +3,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { products } from '../products';
+import { Product, products } from '../products';
 // #enddocregion imports
 
 @Component({
@@ -13,7 +13,7 @@ import { products } from '../products';
 })
 // #docregion props-methods, product-prop
 export class ProductDetailsComponent implements OnInit {
-  product;
+  product: Product|undefined;
   // #enddocregion product-prop
 
   constructor(

aio/content/examples/getting-started/src/app/product-details/product-details.component.ts

@@ -3,7 +3,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { products } from '../products';
+import { Product, products } from '../products';
 import { CartService } from '../cart.service';
 // #enddocregion cart-service
 
@@ -15,7 +15,7 @@ import { CartService } from '../cart.service';
 // #docregion inject-cart-service, add-to-cart
 export class ProductDetailsComponent implements OnInit {
 // #enddocregion add-to-cart, inject-cart-service
-  product;
+  product: Product|undefined;
 
 // #docregion inject-cart-service
   constructor(
@@ -34,7 +34,7 @@ export class ProductDetailsComponent implements OnInit {
   }
 
 // #docregion add-to-cart
-  addToCart(product) {
+  addToCart(product: Product) {
     this.cartService.addToCart(product);
     window.alert('Your product has been added to the cart!');
   }

aio/content/examples/getting-started/src/app/products.ts

@@ -1,4 +1,11 @@
-export const products = [
+export interface Product {
+  id: number;
+  name: string;
+  price: number;
+  description: string;
+}
+
+export const products: Product[] = [
   {
     id: 1,
     name: 'Phone XL',

aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts

@@ -5,8 +5,8 @@ import { HeroesService } from './heroes.service';
 
 @Injectable()
 export class HeroTaxReturnService {
-  private currentTaxReturn: HeroTaxReturn;
+  private currentTaxReturn!: HeroTaxReturn;
-  private originalTaxReturn: HeroTaxReturn;
+  private originalTaxReturn!: HeroTaxReturn;
 
   constructor(private heroService: HeroesService) { }
 

aio/content/examples/http/src/app/config/config.component.ts

@@ -11,9 +11,9 @@ import { Config, ConfigService } from './config.service';
 })
 export class ConfigComponent {
   error: any;
-  headers: string[];
+  headers: string[] = [];
   // #docregion v2
-  config: Config;
+  config: Config | undefined;
 
   // #enddocregion v2
   constructor(private configService: ConfigService) {}
@@ -21,7 +21,7 @@ export class ConfigComponent {
   clear() {
     this.config = undefined;
     this.error = undefined;
-    this.headers = undefined;
+    this.headers = [];
   }
 
   // #docregion v1, v2
@@ -64,7 +64,7 @@ export class ConfigComponent {
           `${key}: ${resp.headers.get(key)}`);
 
         // access the body directly, which is typed as `Config`.
-        this.config = { ... resp.body };
+        this.config = { ...resp.body! };
       });
   }
 // #enddocregion showConfigResponse

aio/content/examples/http/src/app/config/config.service.ts

@@ -43,7 +43,7 @@ export class ConfigService {
 
   getConfig_1() {
   // #docregion getConfig_1
-    return this.http.get(this.configUrl);
+    return this.http.get<Config>(this.configUrl);
   }
   // #enddocregion getConfig_1
 

aio/content/examples/http/src/app/downloader/downloader.component.ts

@@ -7,7 +7,7 @@ import { DownloaderService } from './downloader.service';
   providers: [ DownloaderService ]
 })
 export class DownloaderComponent {
-  contents: string;
+  contents: string | undefined;
   constructor(private downloaderService: DownloaderService) {}
 
   clear() {

aio/content/examples/http/src/app/heroes/heroes.component.ts

@@ -10,8 +10,8 @@ import { HeroesService } from './heroes.service';
   styleUrls: ['./heroes.component.css']
 })
 export class HeroesComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Hero[] = [];
-  editHero: Hero; // the hero currently being edited
+  editHero: Hero | undefined; // the hero currently being edited
 
   constructor(private heroesService: HeroesService) {}
 

aio/content/examples/http/src/app/heroes/heroes.service.ts

@@ -70,7 +70,7 @@ export class HeroesService {
 
   // #docregion deleteHero
   /** DELETE: delete the hero from the server */
-  deleteHero(id: number): Observable<{}> {
+  deleteHero(id: number): Observable<unknown> {
     const url = `${this.heroesUrl}/${id}`; // DELETE api/heroes/42
     return this.http.delete(url, httpOptions)
       .pipe(

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

@@ -2,7 +2,7 @@
 <h2>Search Npm Packages</h2>
 <p><i>Searches when typing stops. Caches for 30 seconds.</i></p>
 <!-- #docregion search -->
-<input type="text" (keyup)="search(getValue($event.target))" id="name" placeholder="Search"/>
+<input type="text" (keyup)="search(getValue($event))" 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

@@ -14,7 +14,7 @@ import { NpmPackageInfo, PackageSearchService } from './package-search.service';
 export class PackageSearchComponent implements OnInit {
   // #docregion debounce
   withRefresh = false;
-  packages$: Observable<NpmPackageInfo[]>;
+  packages$!: Observable<NpmPackageInfo[]>;
   private searchText$ = new Subject<string>();
 
   search(packageName: string) {
@@ -37,8 +37,8 @@ export class PackageSearchComponent implements OnInit {
   toggleRefresh() { this.withRefresh = ! this.withRefresh; }
 
   // #docregion getValue
-  getValue(target: EventTarget): string {
+  getValue(event: Event): string {
-    return (target as HTMLInputElement).value;
+    return (event.target as HTMLInputElement).value;
   }
   // #enddocregion getValue
 }

aio/content/examples/http/src/app/package-search/package-search.service.ts

@@ -14,17 +14,11 @@ export interface NpmPackageInfo {
 
 export const searchUrl = 'https://npmsearch.com/query';
 
-const httpOptions = {
-  headers: new HttpHeaders({
-    'x-refresh':  'true'
-  })
-};
-
 function createHttpOptions(packageName: string, refresh = false) {
     // npm package name search api
     // e.g., http://npmsearch.com/query?q=dom'
     const params = new HttpParams({ fromObject: { q: packageName } });
-    const headerMap = refresh ? {'x-refresh': 'true'} : {};
+    const headerMap: Record<string, string> = refresh ? {'x-refresh': 'true'} : {};
     const headers = new HttpHeaders(headerMap) ;
     return { headers, params };
 }

aio/content/examples/http/src/app/uploader/uploader.component.ts

@@ -8,16 +8,16 @@ import { UploaderService } from './uploader.service';
   providers: [ UploaderService ]
 })
 export class UploaderComponent {
-  message: string;
+  message = '';
 
   constructor(private uploaderService: UploaderService) {}
 
   onPicked(input: HTMLInputElement) {
-    const file = input.files[0];
+    const file = input.files?.[0];
     if (file) {
       this.uploaderService.upload(file).subscribe(
         msg => {
-          input.value = null;
+          input.value = '';
           this.message = msg;
         }
       );

aio/content/examples/http/src/app/uploader/uploader.service.ts

@@ -62,7 +62,7 @@ export class UploaderService {
 
       case HttpEventType.UploadProgress:
         // Compute and show the % done:
-        const percentDone = Math.round(100 * event.loaded / event.total);
+        const percentDone = Math.round(100 * event.loaded / (event.total ?? 0));
         return `File "${file.name}" is ${percentDone}% uploaded.`;
 
       case HttpEventType.Response:

aio/content/examples/http/src/main-specs.ts

@@ -2,7 +2,7 @@ import './testing/global-jasmine';
 import 'jasmine-core/lib/jasmine-core/jasmine-html.js';
 import 'jasmine-core/lib/jasmine-core/boot.js';
 
-declare var jasmine;
+declare var jasmine: any;
 
 import './polyfills';
 
@@ -27,7 +27,7 @@ function bootstrap() {
     location.reload();
     return;
   } else {
-    window.onload(undefined);
+    window.onload?.({} as Event);
     (window as any).jasmineRef = jasmine.getEnv();
   }
 

aio/content/examples/http/src/testing/jasmine.d.ts

@@ -0,0 +1 @@
+declare module 'jasmine-core/lib/jasmine-core/jasmine.js';

aio/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts

@@ -5,7 +5,7 @@ describe('Inputs and Outputs', () => {
   beforeEach(() => browser.get(''));
 
    // helper function used to test what's logged to the console
-  async function logChecker(contents) {
+  async function logChecker(contents: string) {
     const logs = await browser
       .manage()
       .logs()

aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts

@@ -13,10 +13,10 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 })
 export class AliasingComponent {
 
-  input1: string;
+  input1 = '';
   outputEvent1: EventEmitter<string> = new EventEmitter<string>();
 
-  @Input('wishListItem') input2: string; //  @Input(alias)
+  @Input('wishListItem') input2 = ''; //  @Input(alias)
   @Output('wishEvent') outputEvent2 = new EventEmitter<string>(); //  @Output(alias) propertyName = ...
 
 

aio/content/examples/inputs-outputs/src/app/app.component.ts

@@ -34,11 +34,11 @@ export class AppComponent {
     console.warn(`Parent says: crossing off ${item}.`);
   }
 
-  buyClearanceItem(item) {
+  buyClearanceItem(item: string) {
     console.warn(`Parent says: buying ${item}.`);
   }
 
-  saveForLater(item) {
+  saveForLater(item: string) {
     console.warn(`Parent says: saving ${item} for later.`);
   }
 

aio/content/examples/inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts

@@ -17,7 +17,7 @@ export class InTheMetadataComponent  {
 
 
   buyEvent = new EventEmitter<string>();
-  clearanceItem: string;
+  clearanceItem = '';
 
   buyIt() {
     console.warn('Child says: emiting buyEvent with', this.clearanceItem);

aio/content/examples/inputs-outputs/src/app/input-output/input-output.component.ts

@@ -6,7 +6,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   styleUrls: ['./input-output.component.css']
 })
 export class InputOutputComponent {
-  @Input() item: string;
+  @Input() item = '';
   @Output() deleteRequest = new EventEmitter<string>();
 
   lineThrough = '';

aio/content/examples/inputs-outputs/src/app/item-detail/item-detail.component.ts

@@ -11,6 +11,6 @@ import { Component, Input } from '@angular/core'; // First, import Input
 
 // #docregion use-input
 export class ItemDetailComponent {
-  @Input() item: string; // decorate the property with @Input()
+  @Input() item = ''; // decorate the property with @Input()
 }
 // #enddocregion use-input

aio/content/examples/interpolation/src/app/customer.ts

@@ -1,3 +1,3 @@
 export class Customer {
-  name: string;
+  name = '';
 }

aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts

@@ -25,7 +25,7 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI
   comment = '';
 
   // Query for a CONTENT child of type `ChildComponent`
-  @ContentChild(ChildComponent) contentChild: ChildComponent;
+  @ContentChild(ChildComponent) contentChild!: ChildComponent;
 
 // #enddocregion hooks
   constructor(private logger: LoggerService) {

aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts

@@ -27,7 +27,7 @@ export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
   private prevHero = '';
 
   // Query for a VIEW child of type `ChildViewComponent`
-  @ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
+  @ViewChild(ChildViewComponent) viewChild!: ChildViewComponent;
 
   // #enddocregion hooks
   constructor(private logger: LoggerService) {

aio/content/examples/lifecycle-hooks/src/app/counter-parent.component.ts

@@ -20,7 +20,7 @@ import { LoggerService } from './logger.service';
   providers: [LoggerService]
 })
 export class CounterParentComponent {
-  value: number;
+  value = 0;
   spyLog: string[] = [];
 
   private logger: LoggerService;

aio/content/examples/lifecycle-hooks/src/app/counter.component.ts

@@ -16,7 +16,7 @@ import {
   `
 })
 export class MyCounterComponent implements OnChanges {
-  @Input() counter: number;
+  @Input() counter = 0;
   changeLog: string[] = [];
 
   ngOnChanges(changes: SimpleChanges) {

aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.ts

@@ -8,10 +8,10 @@ import { Hero } from './hero';
   templateUrl: './do-check-parent.component.html'
 })
 export class DoCheckParentComponent {
-  hero: Hero;
+  hero!: Hero;
-  power: string;
+  power = '';
   title = 'DoCheck';
-  @ViewChild(DoCheckComponent) childView: DoCheckComponent;
+  @ViewChild(DoCheckComponent) childView!: DoCheckComponent;
 
   constructor() {
     this.reset();

aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts

@@ -16,8 +16,8 @@ import { Hero } from './hero';
   `
 })
 export class DoCheckComponent implements DoCheck {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
-  @Input() power: string;
+  @Input() power = '';
 
   changeDetected = false;
   changeLog: string[] = [];

aio/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.ts

@@ -9,10 +9,10 @@ import { OnChangesComponent } from './on-changes.component';
   styles: ['']
 })
 export class OnChangesParentComponent {
-  hero: Hero;
+  hero!: Hero;
-  power: string;
+  power = '';
   title = 'OnChanges';
-  @ViewChild(OnChangesComponent) childView: OnChangesComponent;
+  @ViewChild(OnChangesComponent) childView!: OnChangesComponent;
 
   constructor() {
     this.reset();

aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts

@@ -17,8 +17,8 @@ import { Hero } from './hero';
 })
 export class OnChangesComponent implements OnChanges {
 // #docregion inputs
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
-  @Input() power: string;
+  @Input() power = '';
 // #enddocregion inputs
 
   changeLog: string[] = [];

aio/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts

@@ -28,7 +28,7 @@ import { LoggerService } from './logger.service';
 export class PeekABooParentComponent {
 
   hasChild = false;
-  hookLog: string[];
+  hookLog: string[] = [];
 
   heroName = 'Windstorm';
   private logger: LoggerService;

aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts

@@ -28,7 +28,7 @@ export class PeekABooComponent extends PeekABooDirective implements
              AfterContentInit, AfterContentChecked,
              AfterViewInit, AfterViewChecked,
              OnDestroy {
-  @Input()  name: string;
+  @Input() name = '';
 
   private verb = 'initialized';
 

aio/content/examples/ngcontainer/src/app/app.component.ts

@@ -1,7 +1,7 @@
 // #docregion
 import { Component } from '@angular/core';
 
-import { heroes } from './hero';
+import { Hero, heroes } from './hero';
 
 @Component({
   selector: 'app-root',
@@ -10,7 +10,7 @@ import { heroes } from './hero';
 })
 export class AppComponent {
   heroes = heroes;
-  hero = this.heroes[0];
+  hero: Hero | null = this.heroes[0];
   heroTraits = ['honest', 'brave', 'considerate'];
 
   // flags for the table

aio/content/examples/ngcontainer/src/app/hero.components.ts

@@ -8,7 +8,7 @@ import { Hero } from './hero';
   template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
 })
 export class HappyHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
 
 @Component({
@@ -16,7 +16,7 @@ export class HappyHeroComponent {
   template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
 })
 export class SadHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
 
 @Component({
@@ -24,7 +24,7 @@ export class SadHeroComponent {
   template: `Are you as confused as {{hero.name}}?`
 })
 export class ConfusedHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
 
 @Component({
@@ -32,7 +32,7 @@ export class ConfusedHeroComponent {
   template: `{{message}}`
 })
 export class UnknownHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
   get message() {
     return this.hero && this.hero.name
       ? `${this.hero.name} is strange and mysterious.`