L08084のブログ

中安拓也のブログ

AngularのngIf/elseとng-containerタグとng-templateタグを組み合わせて使う

毎回、AngularでngIf/elseを書くたびに書き方を忘れてググっているので書きました。

ngIf/elseとng-containerタグとng-templateタグを組み合わせて使う

ngIf/elseとng-containerタグとng-templateタグを組み合わせて使うことで、余計なタグを生成せずにDOMの表示を切り替えることができます。

ngIf-else構文

条件句の真偽値に応じて、表示するDOMを切り替えることができます。条件句が真の時はngIfのタグを、条件句が偽のときはelseで指定しているタグを表示します。

<ng-container>タグ

テンプレート上で使用しても何も表示されないタグです。*ngIf*ngForの構造化ディレクティブを付けて使用する事で余計なタグを生成せずに、表示するタグの切り替えや、ループを行うことができます。

<ng-container>
  <div>Hey!!!!</div>
</ng-container>

上記の例では、<ng-container>タグ自体はコメント化されるため表示されませんが、ラップしているdiv要素は表示されます

*ngFor<ng-container>上で使っている例

    <ng-container *ngFor="let fraction of fractionList; let i = index">
      <app-fraction-input [(fraction)]="fractionList[i]"></app-fraction-input>
    </ng-container>

<ng-template>タグ

デフォルトでは表示されずに、ラップしている要素ごとコメント化されるタグです。#で名前をつけることができます。

<ng-template>
  <div>Hey!!!!!!</div>
</ng-template>

上記の例では、<ng-template>タグ自体も<ng-template>タグにラップされているdiv要素も表示されません

組み合わせて使った例

ngIf-else構文により、条件句(memoId)がtrueのときは<ng-container>タグでラップされている要素が表示されます。また、条件句が偽の時にはelseで指定されているcreateLabelブロック(<ng-template>タグ)の方が表示されます。

<!-- 条件が真の時には「Update」と表示される -->
<ng-container *ngIf="memoId; else createLabel">Update</ng-container>
<!-- 条件が偽の時には「Create」と表示される -->
<ng-template #createLabel>Create</ng-template>

環境

  • Angular CLI: 8.3.20
  • Node: 12.13.1
  • OS: darwin x64
  • Angular: 8.2.14

参考サイト

コンポーネントにおけるObservableの購読 - Angular After Tutorial

Angularの便利タグng-container, ng-content, ng-template - Qiita

https://angular.jp/guide/structural-directives