<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>에 바인딩된 어트리뷰트나 이벤트 리스너, 디렉티브는 모두 무시합니다.
동적으로 렌더링하기
<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></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 값에 따라 스타일을 지정할 수 있습니다.