【Angular】ng-templateの使い方を実装しながら解説

2023 6/04

2023年4月23日 2023年6月4日

Angularのng-templateってどうやって使えばいいんだろう….？

この記事では上記の悩みを解決します。

Contents

ng-templateの使い方

ng-templateの使いかたですが、以下のように書きます。

<ng-template></ng-template>

ng-templateを使いたい場所に指定するだけです。

ng-templateを使うメリット

ng-templateを使うメリットは、div要素では非表示であってもDOM要素は生成しますが、ng-templateの場合はDOM要素は生成しません。

なので、無駄なDOM要素を生成せずに済みます。

ng-template実装例①

それでは実際にng-templateを実装する例を見ていきましょう。

  <div>
    <p>データを表示1</p>
  </div>
  <ng-template>
    <p>データを表示2</p>
  </ng-template>

コードを解説すると、上記ではデータを表示1だけ出力され、データを表示2は表示されません。

これはng-templateの注意点ではありますが、ng-template単体で使う場合は、レンダリングしないので注意です。

ng-template実装例②

sample.component.ts側で配列データを定義しておきます。

<div *ngIf="yotei.length > 0; else noneData">
  データの表示
</div>

<ng-template #noneData>
  <div class="none-data">データはありません。</div>
</ng-template>

コードを解説すると、配列データの要素数が0ではない(=つまり、配列にデータがある)場合は、データの表示部分が読まれ、配列のデータがない場合は、ng-templateの#noneDataが読まれます。

画面上では、yoteiという配列データの要素がある場合は、「データの表示」が表示され、配列データがない場合は、「データはありません。」が表示されます。

ng-templateの実装例③

thenを使用した場合について解説します。

<ng-container>
  <app-header></app-header>
  <div *ngIf="displayFlg; then display; else noneData"></div>
  <app-footer></app-footer>
</ng-container>

<ng-template #display>
  <p>データを表示1</p>
</ng-template>
<ng-template #noneData>
  <p>データを表示2</p>
</ng-template>

上記のコードを解説すると、displayFlgがtrueの時は、ng-templateのdisplayを、falseの場合はng-tempateのnoneDataを参照してという意味になります。

このようにng-templateの参照する値を指定できるのと、上記のようにng-templateを外だしできるのもメリットとしてあります。

>>転職するのにおすすめのサイトはこちらをクリック
>>副業で稼ぐためにおすすめのサイトはこちらをクリック