ng-template / ng-container 차이

1. ng-template이란?

ng-template은 Angular에서 제공하는 템플릿 컨테이너로, 동적으로 렌더링할 HTML 콘텐츠를 정의하는 데 사용됩니다.
ng-template은 단독으로 렌더링되지 않으며, Angular가 명시적으로 렌더링하도록 설정해야 화면에 나타납니다.

주요 특징

• 템플릿 정의: ng-template 내부의 코드는 DOM에 렌더링되지 않고, Angular가 필요할 때만 렌더링됩니다.
• 유연한 사용: *ngIf의 else, ngTemplateOutlet 등의 Angular 지시문과 결합하여 활용됩니다.
• 매개변수 전달 가능: ng-template에 데이터를 바인딩하거나 전달할 수 있습니다.

 

예시

 

조건부 렌더링

<ng-template #loadingTemplate>
  <p>로딩 중입니다...</p>
</ng-template>

<div *ngIf="isLoading; else loadingTemplate">
  <p>콘텐츠가 로드되었습니다!</p>
</div>

 

• <ng-template> 내부에 로딩 메시지를 정의합니다.
• *ngIf의 else 키워드를 사용해 isLoading이 false일 경우 loadingTemplate을 렌더링합니다.

 

 

동적 템플릿 렌더링

<ng-template #greeting let-name="name">
  <p>안녕하세요, {{ name }}님!</p>
</ng-template>

<div *ngFor="let user of users">
  <ng-container *ngTemplateOutlet="greeting; context: { name: user.name }"></ng-container>
</div>

 

 

• ng-template에서 let-name 구문으로 데이터를 받을 준비를 합니다.
• ngTemplateOutlet 지시문을 사용해 템플릿을 반복적으로 렌더링하며, context로 데이터를 전달합니다.

 

 

2.ng-container란?

ng-container는 Angular에서 제공하는 그룹핑 컨테이너로, HTML 구조를 최적화하기 위해 사용됩니다. DOM에 렌더링되지 않으며, 단지 Angular가 구조적 지시문을 적용하는 데 활용됩니다.

주요 특징

• 불필요한 DOM 제거: div와 같은 추가 태그를 생성하지 않고 여러 요소를 그룹화.
• 구조적 지시문 지원: *ngIf, *ngFor 등의 구조적 지시문과 결합하여 DOM 구조를 간소화.
• 스타일 및 속성 적용 불가: ng-container는 DOM에 표시되지 않으므로 CSS 스타일이나 속성을 직접 적용할 수 없습니다.

 

예시

 

 

구조적 지시문으로 DOM 최적화

<ng-container *ngIf="showContent">
  <h1>안녕하세요!</h1>
  <p>이 콘텐츠는 조건에 따라 렌더링됩니다.</p>
</ng-container>

 

 

• showContent가 true일 때만 <h1>과 <p>를 렌더링합니다.
• ng-container는 DOM에 렌더링되지 않으므로 <div>와 같은 추가 노드가 생성되지 않습니다.

 

중첩된 조건문 처리

<ng-container *ngIf="isLoggedIn; else loggedOut">
  <p>환영합니다, {{ userName }}님!</p>
</ng-container>

<ng-template #loggedOut>
  <p>로그인이 필요합니다.</p>
</ng-template>

 

 

• ng-container는 조건문 로직을 깔끔하게 처리하면서 추가 DOM 요소를 생성하지 않습니다.
• else 키워드를 사용하여 ng-template과 결합합니다.

---

ng-template과 ng-container의 차이점

특징	ng-template	ng-container
렌더링 여부	DOM에 렌더링되지 않음, Angular가 명시적으로 렌더링해야 사용됨	DOM에 렌더링되지 않음, Angular가 렌더링 시점에 무시
주요 목적	동적 콘텐츠를 렌더링하거나 템플릿을 정의	그룹화된 콘텐츠를 표시하거나 구조 지시문을 적용
사용 예시	ngIf의 else, ngTemplateOutlet 등	*ngIf, *ngFor와 함께 불필요한 DOM 제거
주요 차이점	템플릿 정의용으로 사용, 직접적으로 콘텐츠를 렌더링하지 않음	그룹핑 요소로 사용, 내부 요소를 조건부로 렌더링하거나 반복 가능

 

 

 

두 요소를 조합한 실전 예제

사용자 프로필 렌더링

<ng-template #userTemplate let-user="user">
  <div class="user-profile">
    <h2>{{ user.name }}</h2>
    <p>나이: {{ user.age }}</p>
  </div>
</ng-template>

<ng-container *ngFor="let user of users">
  <ng-container *ngTemplateOutlet="userTemplate; context: { user: user }"></ng-container>
</ng-container>

 

 

• ng-template으로 사용자 프로필을 정의하고, 데이터를 받아 렌더링합니다.
• ng-container를 사용해 반복문 내에서 ngTemplateOutlet을 적용합니다.