ngSwitch

ngSwitch 디렉티브는 switch 조건에 따라 여러 요소 중에 하나의 요소를 선택하여 DOM에 추가한다. 자바스크립트의 switch 문과 유사하게 동작한다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <input type="text" [(ngModel)]="num" placeholder="숫자를 입력하세요">
    <div [ngSwitch]="num">
      <div *ngSwitchCase="'1'">One</div>
      <div *ngSwitchCase="'2'">Two</div>
      <div *ngSwitchCase="'3'">Three</div>
      <div *ngSwitchDefault>This is Default</div>
    </div>
  `
  //input 창에 1이 쓰여지면 [ngSwitch] <div>One</div> 이 보여진다.
  //*ngSwitchCase = "'조건'" ,쌍따옴표랑 따옴표로 표시함
  //[()] 은 양방향 바인딩
})
export class AppComponent {
  num: string;
}