From: Kai Moritz Date: Sat, 2 May 2020 10:20:09 +0000 (+0200) Subject: 2: Display a List X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=660221eb935d32c78466b125f1b83eb87b8dab31;p=examples%2Fangular-tour-of-heroes 2: Display a List a) Create mock heroes + Displaying heroes --- diff --git a/src/app/heroes/heroes.component.css b/src/app/heroes/heroes.component.css index e69de29..9759a42 100644 --- a/src/app/heroes/heroes.component.css +++ b/src/app/heroes/heroes.component.css @@ -0,0 +1,44 @@ +/* HeroesComponent's private CSS styles */ +.heroes { + margin: 0 0 2em 0; + list-style-type: none; + padding: 0; + width: 15em; +} +.heroes li { + cursor: pointer; + position: relative; + left: 0; + 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 li.selected:hover { + background-color: #BBD8DC; + color: white; +} +.heroes .badge { + display: inline-block; + font-size: small; + color: white; + padding: 0.8em 0.7em 0 0.7em; + background-color:#405061; + line-height: 1em; + position: relative; + left: -1px; + top: -4px; + height: 1.8em; + 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 eb1a9a9..dd417cf 100644 --- a/src/app/heroes/heroes.component.html +++ b/src/app/heroes/heroes.component.html @@ -1,3 +1,9 @@ +

My Heroes

+

{{hero.name | uppercase}} Details

id: {{hero.id}}
diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts index dd46908..2bb7a69 100644 --- a/src/app/heroes/heroes.component.ts +++ b/src/app/heroes/heroes.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Hero } from '../hero'; +import { HEROES } from '../mock-heroes'; @Component({ selector: 'app-heroes', @@ -8,6 +9,8 @@ import { Hero } from '../hero'; }) export class HeroesComponent implements OnInit { + heroes = HEROES; + hero: Hero = { id: 1, name: 'Windstorm', diff --git a/src/app/mock-heroes.ts b/src/app/mock-heroes.ts new file mode 100644 index 0000000..27ed1ff --- /dev/null +++ b/src/app/mock-heroes.ts @@ -0,0 +1,14 @@ +import { Hero } from './hero'; + +export const HEROES: Hero[] = [ + { id: 11, name: 'Dr Nice' }, + { id: 12, name: 'Narco' }, + { id: 13, name: 'Bombasto' }, + { id: 14, name: 'Celeritas' }, + { id: 15, name: 'Magneta' }, + { id: 16, name: 'RubberMan' }, + { id: 17, name: 'Dynama' }, + { id: 18, name: 'Dr IQ' }, + { id: 19, name: 'Magma' }, + { id: 20, name: 'Tornado' } +];