From 58e4e8a43a7f0ea82123c6149ff475b62c6dc372 Mon Sep 17 00:00:00 2001
From: Kai Moritz <kai@juplo.de>
Date: Fri, 1 May 2020 19:31:56 +0200
Subject: [PATCH] 1: The Hero Editor c) Create a Hero interface + Show the hero
 object

---
 src/app/hero.ts                      | 4 ++++
 src/app/heroes/heroes.component.html | 4 +++-
 src/app/heroes/heroes.component.ts   | 6 +++++-
 3 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 src/app/hero.ts

diff --git a/src/app/hero.ts b/src/app/hero.ts
new file mode 100644
index 0000000..a61b497
--- /dev/null
+++ b/src/app/hero.ts
@@ -0,0 +1,4 @@
+export interface Hero {
+  id: number;
+  name: string;
+}
diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html
index 6fe45e5..c48ee17 100644
--- a/src/app/heroes/heroes.component.html
+++ b/src/app/heroes/heroes.component.html
@@ -1 +1,3 @@
-{{hero}}
+<h2>{{hero.name}} Details</h2>
+<div><span>id: </span>{{hero.id}}</div>
+<div><span>name: </span>{{hero.name}}</div>
diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts
index b8b6314..dd46908 100644
--- a/src/app/heroes/heroes.component.ts
+++ b/src/app/heroes/heroes.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Hero } from '../hero';
 
 @Component({
   selector: 'app-heroes',
@@ -7,7 +8,10 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HeroesComponent implements OnInit {
 
-  hero = 'Windstorm';
+  hero: Hero = {
+    id: 1,
+    name: 'Windstorm',
+  };
 
   constructor() { }
 
-- 
2.20.1