Angular의 if 디렉티브

Angular에서는 변수의 값에 따라 태그가 표시되거나 숨겨지도록 만들 수 있습니다. 이를 위해 특별한 디렉티브 *ngIf가 사용됩니다. 어떻게 작동하는지 살펴봅시다.

먼저 이 디렉티브를 임포트해야 합니다:

app/app.component.tsimport {NgIf} from "@angular/common";

그리고 데코레이터의 임포트 섹션에 추가합니다:

app/app.component.ts@Component({
  .....
  imports: [....., NgIf],
  ....
})

이제 다음과 같은 변수가 있다고 가정해 봅시다:

app/app.component.tsexport class AppComponent {
  public isAdmin: boolean = true;
}

이 변수의 값이 true일 때 표시될 div를 만들어 봅시다:

app/app.component.html<div *ngIf="isAdmin">
  text
</div>

이제 변수의 값이 false일 때 div가 표시되도록 만들어 봅시다:

app/app.component.html<div *ngIf="!isAdmin">
  text
</div>