흐름 제어 - `@if`

앱을 개발하다 보면 사용자에게 어떤 화면을 표시해야 할지 판단할 일이 많습니다. 그리고 이런 경우는 대부분 앱 상태에 따라 조건으로 결정됩니다.

템플릿에서 조건에 따라 엘리먼트를 표시하거나 표시하지 않으려면 템플릿 문법 @if 를 사용하면 됩니다.

참고: 흐름 제어 핵심 가이드 문서를 참고하세요.

이번에는 템플릿에 조건을 지정해 봅시다.

조건에 따라 엘리먼트를 화면에 표시하거나 표시하지 않으려면 @if 를 사용합니다.

이렇게 사용하면 됩니다:

@Component({
  ...
  template: `
    @if (isLoggedIn) {
      <p>Welcome back, Friend!</p>
    }
  `,
})
export class App {
  isLoggedIn = true;
}

두 가지가 중요합니다:

if 앞에는 @가 붙습니다. 이 문자는 Angular 템플릿 문법이라는 것을 의미합니다.
아직 *ngIf를 사용하는 애플리케이션에서는 Angular NgIf 문서 를 참고하세요.

isServerRunning 프로퍼티를 추가해 봅시다

App 컴포넌트 클래스에 boolean 타입으로 isServerRunning 프로퍼티를 선언하고 이 프로퍼티 값으로 true 를 지정합니다.

템플릿에 @if 사용하기

isServerRunning의 값이 true라면 Yes, the server is running을 표시하도록 템플릿을 수정합니다.

템플릿에 @else 사용하기

Angular는 else에 해당하는 템플릿 문법 @else를 제공합니다. 템플릿을 수정해서 else인 경우에 No, the server is not running이 표시되게 수정해 봅시다.

예제를 봅시다:
```
template: `
@if (isServerRunning) {
  ...
} @else {
  ...
}
`;
```
빠진 마크업을 직접 작성해 보세요.

이런 기능을 조건부 흐름 제어라고 합니다. 다음 예제에서는 항목을 반복하는 방법을 알아봅시다.