흐름 제어 - @if

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

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

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

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

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

이렇게 사용하면 됩니다:

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

두 가지가 중요합니다:

• if 앞에는 @가 붙습니다. 이 문자는 Angular 템플릿 문법이라는 것을 의미합니다.
• v16 버전이나 이전 버전에서는 Angular NgIf 문서 를 참고하세요.

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

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

2. 템플릿에 @if 사용하기

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

3. 템플릿에 @else 사용하기

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

   예제를 봅시다:

         
   template: `  @if (isServerRunning) { ... }  @else { ... }`;
       

   빠진 마크업을 직접 작성해 보세요.

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