From 58e4e8a43a7f0ea82123c6149ff475b62c6dc372 Mon Sep 17 00:00:00 2001 From: Kai Moritz 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}} +

{{hero.name}} Details

+
id: {{hero.id}}
+
name: {{hero.name}}
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