[Angular Tutorial 03] Display a Heroes List
https://angular.io/tutorial/toh-pt2
In this page, you'll expand the Tour of Heroes app to display a list of heroes, and allow users to select a hero and display the hero's details.
이 페이지에서 영웅 목록을 출력하고 사용자가 선택한 영웅의 상세 정보를 출력해 보도록 하겠습니다.
src/app/ 하위에 mock-heroes.ts 파일을 생성 하고 다음과 같이 작성 합니다.
import { Hero } from './hero';
export const HEROES: Hero[] = [
{ id: 11, name: 'Mr. 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' }
];
이제 mock-heroes.ts 에 있는 데이터를 출력 해 보도록 하겠습니다.
우선 heroes.component.ts 파일을 수정하여 mock-heroes.ts로부터 HEROES 데이터를 component 로 받아오겠습니다.
import { Component, OnInit } from '@angular/core';
import { HEROES } from '../mock-heroes'; //기존의 hero.ts import는 삭제
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
heroes = HEROES; // mock-heroes 로부터 가져온 HEROES
constructor() { }
ngOnInit() {
}
}
*ngFor 을 이용하여 리스트를 출력 해 보겠습니다.
heroes.component.html (heroes template) 파일을 다음과같이 수정 합니다.
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<li> is the host element
heroes is the list from the HeroesComponent class.
hero holds the current hero object for each iteration through the list.
리스트가 성공적으로 출력 되었습니다.
이번에는 리스트를 예쁘게 꾸며보도록 하겠습니다.
CLI를 이용하여 component 를 생성하면 html 과 css 파일이 자동으로 생성되며, heroes.component.ts 파일을 보시면 templateUrl 과 styleUrls 가 자동으로 선언되어있는 거을 볼 수 있습니다. 참 편리하지요?
우리는 단지 heroes.component.css 파일에 스타일을 추가 하면 되겠습니다. 아래의 코드를 작성 해 주세요.
/* HeroesComponent's private CSS styles */
.selected {
background-color: #CFD8DC !important;
color: white;
}
.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.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
훨씬 보기가 좋아졌습니다. 이번에는 click event 를 추가해보도록 하겠습니다.
heroes.component.html (template excerpt) 파일의 li 에 다음과같이 click 옵션을 추가 해 주세요.
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
event handler 를 작성 합니다. src/app/heroes/heroes.component.ts (onSelect)를 수정 해 주세요.
앞에서 삭제 했던 import { Hero } from '../hero'; 를 상단에 다시 추가 해 줍니다.
import { Component, OnInit } from '@angular/core';
import { HEROES } from '../mock-heroes';
import { Hero } from '../hero';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
heroes = HEROES; // mock-heroes 로부터 가져온 HEROES
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
constructor() { }
ngOnInit() {
}
}
리스트와 디테일 페이지가 함께 나오도록 파일을 수정 해 줍니다.
heroes.component.html (selected hero details) 파일을 업데이트 해주세요.
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ngIf="selectedHero">
<h2>{{selectedHero.name | uppercase}} Details</h2>
<div><span>id: </span>{{selectedHero.id}}</div>
<div>
<label>name:
<input [(ngModel)]="selectedHero.name" placeholder="name">
</label>
</div>
</div>
결과 화면 입니다.
ngIf : https://angular.io/api/common/NgIf
The Tour of Heroes app displays a list of heroes in a Master/Detail view.
The user can select a hero and see that hero's details.
You used *ngFor to display a list.
You used *ngIf to conditionally include or exclude a block of HTML.
You can toggle a CSS style class with a class binding.
https://angular.io/tutorial/toh-pt2
