Difference between ng-container and ng-template in Angular | What they are and when to use them - Dillion's Blog

ng-template과 ng-container

ng-container 와 ng-template 는 앵귤러 Element 를 HTML element 컨테이너처럼 동작하게 해준다.

HTML 요소들을 렌더링할때 ng-container 또는 ng-template 로 감싸주어 사용한다.

ng-template

<div *ngIf=”true”> Hi </div>

div 태그에 *ngIf 를 사용하면, 앵귤러에서 자체적으로 다음과 같이 변경된다.

<ng-template [ngIf]=”true”>
    <div> Hi </div>
</ng-template>

ng-template 는 기본적으로 DOM 에 렌더링 되지 않는다.

• 단순히 보이지 않는 것이 아닌, DOM 에서도 존재하지 않는다!!

ng-template를 DOM에 렌더링 할려면 ngIf 구조 디렉티브를 사용하거나 템플릿 참조 변수를 사용해야 된다.