Angular는 "ngIf"를 사용하여 템플릿을 조건에 맞게 구성할 수 있습니다. 아래는 "ngif ~ else" 문입니다. JavaScript if (condition) { } else { }문과 매우 유사하게 동작 합니다. 구성 요소 템플릿 내부의 렌더 흐름을 제어하기 위해 "else" 문을 사용하는 방법은 다음과 같습니다.

<div *ngIf="isLoggedIn; else loggedOut">
  Welcome ngmsoftware.
</div>

<ng-template #loggedOut>
  Please friend, login.
</ng-template>

템플릿을 정의하지 않아도 정상 동작합니다.

<div *ngIf="isLoggedIn">
  Welcome ngmsoftware.
</div>

위 코드가 실행될 때 아래와 같이 동작합니다.

<ng-template [ngIf]="isLoggedIn">
  <div>
    Welcome ngmsoftware.
  </div>
</ng-template>

Angular에서 if ~ else와 같이 구성하려면 아래와 같이 작성할 수 있습니다.

<ng-template [ngIf]="isLoggedIn" [ngIfElse]="loggedOut">
  <div>
    Welcome ngmsoftware.
  </div>
</ng-template>

<ng-template #loggedOut>
  <div>
    Please friend, login.
  </div>
</ng-template>