ng-template 와 ng-container

Angular를 사용하면서 ng-template와 ng-container를 쓰는일이 있습니다.

그러다 문뜩 구체적으로 어떤 의미와 목적이 있는지 궁금해 공식 홈페이지에서 찾아봤습니다.

<ng-tempalte>

ng-template는  HTML 랜더링을 하기위한 Angular 엘리먼트라고 합니다.

그리고 직접적으로 표현되지 않는다 하며, view에 랜더링 되기전에 <ng-tempalte>와 내용에 대해서 주석처리 한다고 하는데

어떤 의미인지 살펴봐야겠습니다.

공식 홈페이지에 있는 예제는 다음과 같이 설명합니다.

ng-template에 감싸진 부분이 structural directive 가 없으면 그 부분은 해당 엘리먼트가 사라집니다.

structural directive 는 ngFor, ngIF, ngSwitch 등이 있습니다.

<p>Hip!</p>
<ng-template>
  <p>Hip!</p>
</ng-template>
<p>Hooray!</p>

그리고 view에서는 다음과 같이 표현됩니다.

저같은 경우는 ng-template에 template reference variable를 붙여 사용해봤습니다. 

<ng-container *ngIf=" globals.userName == ''; else el">
<li>
    <a (click)="routerLink('/member/login')">로그인</a>
</li>
<li>
    <a (click)="routerLink('/member/join')">회원가입</a>
</li>
<li>
    <a (click)="routerLink('/order/cartList')">
        <i class="xi-cart-o"></i>
    </a>
</li>
</ng-container>
<ng-template #el>
<li>{{globals.userName}}님</li>
<li>
    <a (click)="onClickLogout()">로그아웃</a>
</li>
<li>
    <a (click)="routerLink('/mypage/history/myOrderList')">마이페이지</a>
</li>

<li>
    <a (click)="routerLink('/order/cartList')">
        <i class="xi-cart-o"></i>
    </a>
</li>
</ng-template>

로그인 전입니다. 밑에 보니깐 주석으로 bindings라고 젹혀 있으며 true라고 되어있네요

그리고 로그인을 시켜주니 밑에 false로 바뀌며 li 값들이 바꼈습니다.

로그인 전에는 ng-if에서  true이기 때문에 el이라고 붙인 ng-template가 작동이 안되 해당 엘리먼트가 없어지고 로그인 후에 false로 바뀌며 el 참조변수가 작동해 ng-template가 렌더링 된거 같습니다.

제 개인적인 생각인데 ng-container에서 ngIf directive를 사용해 주면서 el이라는 참조변수를 사용해 주석처리 되지 않는것 같습니다.

다음은 

<ng-container>

공홈에는 structural directive를 호스트 할 수 있어야하는 루트 엘리먼트들이 있는데 li같이 ngFor를 사용해야 하는 경우가 그 예라고 있습니다.

li 같은 경우를 호스트 엘리먼트라고 하는군요.

하지만 호스트 엘리먼트가 없을 경우 div같은 네이티브 html 엘리먼트를 사용할 수도 있다고 합니다.

<li *ngFor="let hero of heroes">{{hero.name}}</li>

<div *ngIf="hero" class="name">{{hero.name}}</div>

다음은 사용예 입니다. (공홈에서 가져왔습니다)

다음과 같은 코드가 있고 css가 있습니다.

<p>
  I turned the corner
  <span *ngIf="hero">
    and saw {{hero.name}}. I waved
  </span>
  and continued on my way.
</p>

이 css는 글로벌하게 되어있는 css입니다.

p span { color: red; font-size: 70%; }

위의 p 태그 밑에 ngIf 처리되어있는 span도 적용되어 이상하게 렌더링 되었습니다.

또 하나의 예입니다.

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <span *ngFor="let h of heroes">
    <span *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </span>
  </span>
</select>

select 같은경우는 option이라는 자식 엘리먼트를 필요로 하고 div나 span같은 것은 올 수 없습니다.

위의 두 예제를 ng-container를 사용해 해결해 보자면

예제1

<p>
  I turned the corner
  <ng-container *ngIf="hero">
    and saw {{hero.name}}. I waved
  </ng-container>
  and continued on my way.
</p>

예제2

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <ng-container *ngFor="let h of heroes">
    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </ng-container>
  </ng-container>
</select>

ng-container를 사용하여 해결해보았습니다. 

ng-container는 Angular parser가 인식하는 syntax 엘리먼트라고 합니다. 그리고 directive, component, class, or interface가 아니며,

javascript의 if-block의 중괄호 같이 여겨진다는데 제 설명이 맞다면 block 처리를 해주고 그에 대한 문법은 html dom에는 영향을 주지 않는 그런것이 아닐까요? 

이상입니다.

출처 및 참고: https://angular.io/guide/structural-directives#the-ng-template