diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
index ca8260f1d6..086936986d 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
@@ -193,9 +193,9 @@ function heroModuleSetup() {
     // #docregion title-case-pipe
     it('should convert hero name to Title Case', () => {
       // get the name's input and display elements from the DOM
-      const hostElement = fixture.nativeElement;
-      const nameInput: HTMLInputElement = hostElement.querySelector('input');
-      const nameDisplay: HTMLElement = hostElement.querySelector('span');
+      const hostElement: HTMLElement = fixture.nativeElement;
+      const nameInput: HTMLInputElement = hostElement.querySelector('input')!;
+      const nameDisplay: HTMLElement = hostElement.querySelector('span')!;
 
       // simulate user entering a new name into the input box
       nameInput.value = 'quick BROWN  fOx';
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
index deee62725e..75443e0355 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
@@ -1,6 +1,6 @@
 /* tslint:disable:member-ordering */
 // #docplaster
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Hero } from '../model/hero';
@@ -23,7 +23,7 @@ export class HeroDetailComponent implements OnInit {
   // #enddocregion ctor
 // #enddocregion prototype
 
-  @Input() hero!: Hero;
+  hero!: Hero;
 
   // #docregion ng-on-init
   ngOnInit(): void {