【Angular】ngTemplateOutletディレクティブの使い方

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

概要

ngTemplateOutletの使い方について基本を学んだので備忘録として書きます。少し応用(?)も入れました。

あと私事ですが、今回からMarkdownで記事を書いてます。コードが綺麗に書けて感動！

ngTemplateOutletの使い方

ngTemplateOutletとは？

あらかじめ用意したテンプレート(ng-template)を任意の場所に挿入することができるディレクティブです。

構文

<ng-container *ngTemplateOutlet="参照元変数; context: テンプレートに反映させるオブジェクト">
</ng-container>

ng-template側では以下のようにして変数を受け取ります。

<ng-template #参照元変数 let-変数名="テンプレートに反映させるオブジェクトのプロパティ名">
// テンプレート化したいコード
</ng-template>

例

ngTemplateOutletディレクティブで呼び出すテンプレートを指定し、contextに指定したオブジェクトはテンプレートに引き渡すことができます。

component.html

<ng-container *ngTemplateOutlet"person; context: persons[0]">
</ng-container>

<ng-template #person let-name="name" let-gender="gender" let-hobby="hobby">
  <ul>
    <li>名前: {{name}}</li>
    <li>性別: {{gender}}</li>
    <li>趣味: {{hobby}}</li>
  </ul>
</ng-template>

component.ts

persons = [
  { 
     name: 'Yamada',
     gender: 'man',
     hobby: 'cooking'
  },
  ...
];

応用編

$implicit

$implicitは指定した値を、明示的に値を指定していない"let-変数名"属性に割り当てられます。 具体的に見ていきましょう。

component.html

<ng-container *ngTemplateOutlet"person; context: persons[0]">
</ng-container>

<ng-template #person let-message let-name="name" let-gender="gender" let-hobby="hobby">
  <ul>
    <li>名前: {{name}}</li>
    <li>性別: {{gender}}</li>
    <li>趣味: {{hobby}}</li>
    <p>{{message}}<p>
  </ul>
</ng-template>

component.ts

persons = [
  { 
     name: 'Yamada',
     gender: 'man',
     hobby: 'cooking'
     $implicit: '今日は良い天気ですね'
  },
  ...
];

$implicitの値"今日は良い天気ですね"はlet-message属性に割り当てられ、template内でローカル変数"message"として使うことができます。

ngTemplateOutletで複数のオブジェクトをテンプレートに渡したい

あまりないケースだと思いますが、複数のデータをngTemplateOutlet内で指定したい場合です。

component.html

<ng-container *ngTemplateOutlet"person; context: {$implicit: '今日は良い天気ですね', name:'Yamada', gender: 'man', hobby: 'cooking'}">
</ng-container>

<ng-template #person let-message let-name="name" let-gender="gender" let-hobby="hobby">
  <ul>
    <li>名前: {{name}}</li>
    <li>性別: {{gender}}</li>
    <li>趣味: {{hobby}}</li>
    <p>{{message}}<p>
  </ul>
</ng-template>

これも先程の$implicitを使った例と同じ結果になります。注意点はcontextにはオブジェクト形式で値を渡さないといけないので、{}(波括弧)を使用する必要があります。

今後に向けて

ほぼ参考書に乗っていた内容です。
半年ほどAngularの勉強していますが参考書にこんな内容が載ってるとは知りませんでした。
参考書は熟読しないといけませんね。

Markdown記法いいですね。
もっと早く始めてたら良かった。

参考

素晴らしい記事に感謝致します。
FOX HOUND TECH
はてなで使えるMarkdown記法 - hero-rinのブログ