#02 Tutorial (ngIf, ngFor)

- ngFor를 이용해서 배열을 출력할 수 있다. ngFor를 쓸때는 반드시 앞에 *를 붙여줘야한다.

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

- Style도 `를 이용하여 멀티 라인 텍스트로 사용가능하다.

styles: [`
  .selected {
    background-color: #CFD8DC !important;
    color: white;
  }
  .heroes {
    margin: 0 0 2em 0;
    list-style-type: none;
...
...
...
    margin-right: .8em;
    border-radius: 4px 0 0 4px;
  }
`]

- ngIf를 사용하면 해당 데이터가 있을 때만, 보여주게 할 수 있다. ngIf 또한 앞에 *를 반드시 붙여줘야한다.

<div *ngIf="selectedHero">
  <h2>{{selectedHero.name}} details!</h2>
  <div><label>id: </label>{{selectedHero.id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
  </div>
</div>

- Dom의 구조를 변경할 수 있기 때문에, ngIf와 ngFor를 'structural directives' 라고 부른다.