*ngFor , *ngIf , (click)="func(Hero)"

아래와 같이 html에서 사용할 selectedHero변수,  오클릭메소드 등을 ts파일에 설정해준다.

---------app.component.ts-----------

export class HeroesComponent implements OnInit {
  hero = {
    id: 1,
    name: 'kimtae',
  };
  heroes = HEROES;
  selectedHero: Hero;

  onSelect(hero) {
    this.selectedHero = hero;
  }

  constructor() {}

  ngOnInit(): void {}
}

html을 아래와 같이 작성한다.

--------heores.component.html----------------

//ngFor

<ul>
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
    {{ hero.id }}
    {{ hero.name }}
  </li>
</ul>


//ngIf
<div *ngIf="selectedHero">
  <p>선택된 히어로 :</p>

  {{ selectedHero.name }} </span>

</div>