From 50aeef7b5e0e7f75d1a1de38e2a45bf1953de785 Mon Sep 17 00:00:00 2001 From: Kai Moritz Date: Sat, 9 May 2020 01:22:11 +0200 Subject: [PATCH] 5: Add In-app Navigation d) Navigating to hero details --- src/app/app-routing.module.ts | 2 ++ src/app/dashboard/dashboard.component.html | 2 +- src/app/heroes/heroes.component.css | 23 ++++++++++++++-------- src/app/heroes/heroes.component.html | 7 ++++--- src/app/heroes/heroes.component.ts | 7 ------- 5 files changed, 22 insertions(+), 19 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index b0354f5..2a250c9 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,11 +2,13 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HeroesComponent } from './heroes/heroes.component'; import { DashboardComponent } from './dashboard/dashboard.component'; +import { HeroDetailComponent} from './hero-detail/hero-detail.component'; const routes : Routes = [ { path: '', redirectTo: 'dashboard', pathMatch: 'full'}, { path: 'heroes', component: HeroesComponent }, + { path: 'detail/:id', component: HeroDetailComponent }, { path: 'dashboard', component: DashboardComponent } ]; diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index ddb4fd2..1fc389b 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,6 +1,6 @@

Top Heroes

- +

{{hero.name}}

diff --git a/src/app/heroes/heroes.component.css b/src/app/heroes/heroes.component.css index 9759a42..2ad3fef 100644 --- a/src/app/heroes/heroes.component.css +++ b/src/app/heroes/heroes.component.css @@ -6,28 +6,33 @@ width: 15em; } .heroes li { - cursor: pointer; position: relative; - left: 0; + cursor: pointer; background-color: #EEE; margin: .5em; padding: .3em 0; height: 1.6em; border-radius: 4px; } + .heroes li:hover { color: #607D8B; background-color: #DDD; left: .1em; } -.heroes li.selected { - background-color: #CFD8DC; - color: white; + +.heroes a { + color: #333; + text-decoration: none; + position: relative; + display: block; + width: 250px; } -.heroes li.selected:hover { - background-color: #BBD8DC; - color: white; + +.heroes a:hover { + color:#607D8B; } + .heroes .badge { display: inline-block; font-size: small; @@ -39,6 +44,8 @@ left: -1px; top: -4px; height: 1.8em; + min-width: 16px; + text-align: right; margin-right: .8em; border-radius: 4px 0 0 4px; } diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html index a2e93c2..2eb180e 100644 --- a/src/app/heroes/heroes.component.html +++ b/src/app/heroes/heroes.component.html @@ -1,7 +1,8 @@

My Heroes

- diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts index d8ac642..eaa069b 100644 --- a/src/app/heroes/heroes.component.ts +++ b/src/app/heroes/heroes.component.ts @@ -12,13 +12,6 @@ export class HeroesComponent implements OnInit { heroes: Hero[]; - selectedHero : Hero; - - onSelect(hero : Hero): void { - this.selectedHero = hero; - this.messageService.add(`HeroService: Selected hero id=${hero.id}`); - } - constructor( private heroService : HeroService, private messageService : MessageService) { } -- 2.20.1