[angularjs2] 앵귤러2 ngIf를 이용한 엘리먼트 제어

앵귤러2  ngIf를 이용한 엘리먼트 제어

1. ngIf

- 엘리먼트를 보이거나 숨기는 역할을 한다

1) 종류

<div *ngIf="상태">...</div> <div template="ngIf 상태">...</div> <template [ngIf]="상태"><div>...</div></template>

2. ngIf 예제

1) app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public gender = 1; }

2) app.component.html

<select [(ngModel)]="gender"> <option value=1>man</option> <option value=2>woman</option> </select> <h2 *ngIf="gender==1">choice man</h2> <h2 *ngIf="gender==2">choice woman</h2> <h3> <span template="ngIf gender==1">choose a man</span> <span template="ngIf gender==2">choose a woman</span> </h3> <h4> <template [ngIf]="gender==1">man</template> <template [ngIf]="gender==2">woman</template> </h4>