src/app/hero.ts

@@ -1,4 +0,0 @@
-export interface Hero {
-  id: number;
-  name: string;
-}

src/app/heroes/heroes.component.html

@@ -1,3 +1 @@
-<h2>{{hero.name | uppercase}} Details</h2>
-<div><span>id: </span>{{hero.id}}</div>
-<div><span>name: </span>{{hero.name}}</div>
+<h2>{{hero}}</h2>

src/app/heroes/heroes.component.ts

@@ -1,14 +1,12 @@
 import { Component } from '@angular/core';
-import { Hero } from '../hero';
+
 
 @Component({
   selector: 'app-heroes',
   templateUrl: './heroes.component.html',
-  styleUrls: ['./heroes.component.css']
+  styleUrl: './heroes.component.css'
 })
+
 export class HeroesComponent {
-  hero: Hero = {
-    id: 1,
-    name: 'Windstorm'
-  };
+ hero = 'Windstorm';
 }