심화 가이드
템플릿

엘리먼트 묶기: <ng-container>

<ng-container> 는 여러 엘리먼트를 하나로 묶거나, 템플릿에 추가로 렌더링될 엘리먼트의 위치를 지정하는 특별한 엘리먼트입니다.

<!-- 컴포넌트 템플릿 -->
<section>
  <ng-container>
    <h3>User bio</h3>
    <p>Here's some info about the user</p>
  </ng-container>
</section>
<!-- 렌더링 된 DOM -->
<section>
  <h3>User bio</h3>
  <p>Here's some info about the user</p>
</section>

<ng-container>에 동작을 추가하거나 템플릿에서 사용되는 설정을 더하려면 이 엘리먼트에 디렉티브를 적용할 수도 있습니다.

Angular는 <ng-container>에 적용된 클래스 바인딩, 스타일 바인딩, DOM 이벤트 리스너, 정적 어트리뷰트를 무시합니다. 디렉티브를 통해 적용된 경우에도 마찬가지입니다. 어트리뷰트 바인딩은 오류를 발생시키며, 프로퍼티 바인딩은 디렉티브의 입력 프로퍼티에만 사용할 수 있습니다.

동적으로 렌더링하기

<ng-container>는 동적 컨텐츠가 렌더링될 위치를 지정하는 용도로 사용됩니다.

컴포넌트 렌더링하기

<ng-container>로 컴포넌트를 동적으로 렌더링하려면 Angular가 제공하는 NgComponentOutlet 디렉티브를 사용하면 됩니다.

@Component({
  template: `
    <h2>Your profile</h2>
    <ng-container [ngComponentOutlet]="profileComponent()" />
  `,
})
export class UserProfile {
  isAdmin = input(false);
  profileComponent = computed(() => (this.isAdmin() ? AdminProfile : BasicUserProfile));
}

위 예제 코드에서 NgComponentOutlet 디렉티브는 조건에 따라 <ng-container> 엘리먼트 위치에 AdminProfile 이나 BasicUserProfile 컴포넌트를 렌더링합니다.

템플릿 조각 렌더링하기

<ng-container>로 템플릿 조각을 동적으로 렌더링하려면 Angular가 제공하는 NgTemplateOutlet 디렉티브를 사용하면 됩니다.

@Component({
  template: `
    <h2>Your profile</h2>
    <ng-container [ngTemplateOutlet]="profileTemplate()" />

    <ng-template #admin>This is the admin profile</ng-template>
    <ng-template #basic>This is the basic profile</ng-template>
  `,
})
export class UserProfile {
  isAdmin = input(false);
  adminTemplate = viewChild('admin', {read: TemplateRef});
  basicTemplate = viewChild('basic', {read: TemplateRef});
  profileTemplate = computed(() => (this.isAdmin() ? this.adminTemplate() : this.basicTemplate()));
}

위 예제 코드에서 ngTemplateOutlet 디렉티브는 조건에 따라 <ng-container> 엘리먼트 위치에 템플릿 조각 중 하나를 렌더링합니다.

NgTemplateOutlet에 대해 자세하게 알아보려면 NgTemplateOutlets API 문서를 참고하세요.

<ng-container>와 구조 디렉티브 함께 사용하기

<ng-container 엘리먼트에는 구조 디렉티브를 적용할 수도 있습니다. 다음과 같이 ngIf나 ngFor를 사용하면 됩니다.

<ng-container *ngIf="permissions == 'admin'">
  <h1>Admin Dashboard</h1>
  <admin-infographic />
</ng-container>

<ng-container *ngFor="let item of items; index as i; trackBy: trackByFn">
  <h2>{{ item.title }}</h2>
  <p>{{ item.description }}</p>
</ng-container>

의존성 주입에 <ng-container> 사용하기

Angular 의존성 주입 시스템에 대해 자세하게 알아보려면 의존성 주입 문서를 참고하세요.

<ng-container>에 디렉티브를 추가하면 이 엘리먼트의 자식 엘리먼트는 디렉티브 자체나 디렉티브와 연결된 객체를 의존성으로 주입받을 수 있습니다. 템플릿에서 어떤 값을 선언해서 사용해야 한다면 이 방식이 유용합니다.

@Directive({
  selector: '[theme]',
})
export class Theme {
  // 입력값으로 'light'나 'dark'를 지정합니다. 기본값은 'light' 입니다.
  mode = input<'light' | 'dark'>('light');
}
<ng-container theme="dark">
  <profile-pic />
  <user-bio />
</ng-container>

위 예제 코드를 보면, ProfilePic 컴포넌트와 UserBio 컴포넌트는 Theme 디렉티브를 의존성 객체로 주입받을 수 있고, mode 값에 따라 스타일을 지정할 수 있습니다.