Angular의 if 디렉티브

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

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

import {NgIf} from "@angular/common";

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

@Component({
	.....
	imports: [....., NgIf],
	....
})

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

export class AppComponent {
	public isAdmin: boolean = true;
}

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

<div *ngIf="isAdmin">
	text
</div>

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

<div *ngIf="!isAdmin">
	text
</div>

속성 isAdult를 만드세요. 변수에 true 값이 있을 때 성인을 위한 텍스트를 표시하세요.