히어로들의 여행 : 3. 기능 컴포넌트 만들기

히어로 디테일 컴포넌트 분리해서 만들기

• @Input() 데코레이터 사용하기

부모 컴포넌트(HeroComponent)

// src/app/component/hero-detail/hero-detail.component.html

<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>

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

자식 컴포넌트(HeroDetailComponent)

• 물려 받는 자식에서 @Input 데코레이터 사용한다.

// src/app/component/hero-detail/hero-detail.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { HSModel } from 'src/app/model';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.scss'],
})
export class HeroDetailComponent implements OnInit {
  @Input() hero?: HSModel.Hero;

  constructor() {}

  ngOnInit(): void {}
}

// src/app/component/hero-detail/hero-detail.component.html

<div *ngIf="hero">
  <h2>{{ hero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{ hero.id }}</div>
  <div>
    <label for="hero-name">Hero name: </label>
    <input id="hero-name" [(ngModel)]="hero.name" placeholder="name" />
  </div>
</div>