ng-template과 ng-container
템플릿 조각을 정의하고 호스팅합니다.
ng-template과 ng-container은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
렌더링되지 않는 템플릿
<ng-template>은 무언가가 명시적으로 인스턴스화할 때까지 렌더링되지 않는 마크업 조각을 정의합니다. 이는 *ngIf와 같은 구조적 지시문의 기반입니다.
템플릿 정의하기
<ng-template> 안의 콘텐츠는 동작하지 않는 상태로 유지됩니다. 다른 곳에서 사용하려면 참조 변수를 지정하세요.
<ng-template #empty>
<p>No items found.</p>
</ng-template>ngTemplateOutlet로 렌더링하기
ngTemplateOutlet을 사용하여 참조로 템플릿을 렌더링하세요.
<ng-container *ngTemplateOutlet="empty"></ng-container>
<ng-template #empty>
<p>No items found.</p>
</ng-template>ng-container를 사용하는 이유
<ng-container>는 논리적이며 DOM에 표시되지 않는 그룹화 요소입니다. DOM에 래퍼 요소를 추가하지 않고 지시문을 적용하거나 노드를 그룹화할 수 있습니다.
래퍼 div 피하기
ng-container가 없으면 지시문을 담기 위해 쓸모없는 <div>를 추가해야 할 수 있습니다. ng-container는 렌더링된 출력에서 사라집니다.
<ng-container *ngIf="user">
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</ng-container>제어 흐름 그룹화
ng-container는 DOM을 추가하지 않고 새로운 제어 흐름 블록을 감싸는 데 유용합니다.
<ng-container *ngIf="ready">
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
}
</ng-container>템플릿 컨텍스트
템플릿은 컨텍스트 객체를 받을 수 있으며, let- 변수를 통해 값을 노출합니다.
<ng-template #row let-name="name">
<p>{{ name }}</p>
</ng-template>
<ng-container
*ngTemplateOutlet="row; context: { name: 'Ada' }">
</ng-container>기본 컨텍스트 값
특수한 $implicit 컨텍스트 값은 할당된 키가 없는 let- 변수에 바인딩됩니다.
<ng-template #item let-value>
<span>{{ value }}</span>
</ng-template>
<ng-container
*ngTemplateOutlet="item; context: { $implicit: 42 }">
</ng-container>템플릿은 일급 객체입니다
<ng-template>의 #ref는 TemplateRef입니다. 이를 @Input으로 전달하면 컴포넌트에서 사용하는 쪽이 UI의 일부를 사용자 지정할 수 있습니다.
emptyTemplate = input<TemplateRef<unknown>>();호스트로서의 ng-container
ng-container는 동적 컴포넌트나 템플릿을 위한 배출구 호스트로도 편리하며, DOM을 깔끔하게 유지해 줍니다.
<ng-container *ngComponentOutlet="widgetComponent">
</ng-container>무엇을 언제 사용할까요?
ng-template: 지연되거나 재사용되는 마크업입니다. ng-container: 추가 DOM 없이 지시문을 그룹화하고 호스팅합니다. 두 요소는 함께 사용되는 경우가 많습니다.
빠른 확인
ng-template과 ng-container에 대한 이해도를 확인해 보세요.
복습
<ng-template>은 동작하지 않는 인스턴스화 가능한 마크업을 보관하며, 선택적 컨텍스트와 함께 ngTemplateOutlet을 통해 렌더링됩니다. <ng-container>는 DOM을 추가하지 않고 노드를 그룹화하거나 지시문을 호스팅합니다.
자주 묻는 질문
“ng-template과 ng-container” 강의는 무료인가요?
네 — “ng-template과 ng-container” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“ng-template과 ng-container”에서 뭘 배우나요?
템플릿 조각을 정의하고 호스팅합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“ng-template과 ng-container” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 단일 슬롯 콘텐츠 프로젝션
- select를 사용한 다중 슬롯 프로젝션
- ng-template과 ng-container
- TemplateRef와 ViewContainerRef