Angularで遊ぶ(6) - ディレクティブ - ngIf

条件によって要素を追加・削除する。これは開発者ツールでみたDOMの変化が面白かった。

app.component.html

<form>
  <label for="ifsample">表示/非表示</label>
  <input id="ifsample" name="ifsample" type="checkbox"
    [(ngModel)]="ifsample" />
</form>
<div *ngIf="ifsample">
  <p>見えてる？</p>
</div>

app.component.ts

export class AppComponent {
  ifsample = false;
}

レンダリング後はこんな感じ。チェックボックスをチェックしない状態。

<form _ngcontent-c0="" novalidate="" class="ng-valid ng-dirty ng-touched">
  <label _ngcontent-c0="" for="ifsample">表示/非表示</label>
  <input _ngcontent-c0="" id="ifsample" name="ifsample" 
      type="checkbox" 
      ng-reflect-name="ifsample" 
      ng-reflect-model="false" 
      class="ng-valid ng-dirty ng-touched" >
</form>
<!--bindings={
  "ng-reflect-ng-if": "false"
}-->

するとこうなる。DIVが生える。

<form _ngcontent-c0="" novalidate="" class="ng-valid ng-dirty ng-touched">
  <label _ngcontent-c0="" for="ifsample">表示/非表示</label>
  <input _ngcontent-c0="" id="ifsample" name="ifsample" 
      type="checkbox" 
      ng-reflect-name="ifsample" 
      ng-reflect-model="true" 
      class="ng-valid ng-dirty ng-touched" >
</form>
<!--bindings={
  "ng-reflect-ng-if": "true"
}-->
<div _ngcontent-c0="">
  <p _ngcontent-c0="">見えてる？</p>
</div>

消してしまうのではなくて、非表示にしたいのなら

<div [style.display]="ifsample ? 'inline': 'none'">

みたいにする。

この説明も超絶丁寧なので、みんな山田祥寛さんの本買うべき。

elseが使える。

<div *ngIf="ifsample; else elseContent">
  <p>見えてる？</p>
</div>
<ng-template #elseContent>
  <p>見えてないよね</p>
</ng-template>

thenも使える

<div *ngIf="ifsample; then thenContent; else elseContent">
  <p>ここは見えなくなっちゃう</p>
</div>
<ng-template #elseContent>
  <p>見えてないよね</p>
</ng-template>
<ng-template #thenContent>
  <p>見えてる？</p>
</ng-template>

しかし、NG-TEMPLATEってのがいきなり出てきたのでここは消化不良。 また後で理解できるんだろう。