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;
}
Author And Source
이 문제에 관하여(ngSwitch), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@qor8917/ngSwitch저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)