フレームワークとツールの両面で完成度アップ！ 「Angular」バージョン7の新機能

次世代Webアプリケーションフレームワーク「Angular」の活用 第18回

Angular ElementsのContent Projectionサポート

　AngularのコンポーネントをHTMLのカスタム要素（Custom Elements）として利用できる「Angular Elements」で、タグの内容をコンポーネントに反映する「Content Projection」をサポートしました。図9のサンプルで背景色がついている部分が、Content Projectionでコンポーネントに反映されたタグの内容です。

図9 Angular ElementsでContent Projectionを行うサンプル（p007-elements）

　Content Projectionは、ページ全体から分離してカプセル化されたHTML要素（DOMツリー）を作成するWeb標準「Shadow DOM v1」を利用します。記事執筆時点のEdgeブラウザーはShadow DOM v1をサポートしないため、図9はChromeブラウザーで実行しています。

　Content Projectionを利用するAngular Elementsのコンポーネントでは、テンプレート定義で、タグの内容を反映したい場所に<slot>タグを記述します。

［リスト10］Content Projectionの設定（p007-elements/src/app/my-element/my-element.component.html）

<div>
  <h3>Content Projectionのサンプル</h3>
  <div>----ここから----</div>
  <slot></slot><!-- タグの内容がここに反映される-->
  <div>----ここまで----</div>
</div>

　また、リスト11の記述で、Shadow DOM v1を有効にします。encapsulationは、コンポーネントのカプセル化モードを表す属性です。詳細は公式ドキュメントも参照してください。

［リスト11］Shadow DOM v1の設定（p007-elements/src/app/my-element/my-element.component.ts）

@Component({
（略）
  encapsulation: ViewEncapsulation.ShadowDom // Shadow DOM v1を有効
})
export class MyElementComponent {}

　Angular Elementsのコンポーネントを利用する側では、カスタム要素のタグ（この場合は<my-element>タグ）内にHTML（この場合は<div>以下のタグ）を記述すると、リスト10の<slot>の位置に反映されます。

［リスト12］Content Projectionの利用（p007-elements/src/index.html）

<my-element>
  <div style="background-color:#ffaaaa">
    <h2>こんにちは</h2>
    <p>この要素はmy-elementタグ内に書かれています</p>
  </div>
</my-element>

［補足］Angularに関連したパートナーの開発成果

　Angularチームは、Angular関連の開発を行うパートナーに協力しています。Angular 7のリリース告知記事では、Angularプロジェクトの生成や実行がGUIでできるアプリ「Angular Console」など、パートナーの開発成果が紹介されています。

［補足］新描画エンジンIvyは（また）次バージョンに持ち越し

　Angularの次世代描画エンジンとして開発されている「Ivy」は、Angular 6に続きAngular 7でも含まれませんでした。開発は継続して行われています。

まとめ

　本記事では、2018年10月にリリースされたAngular 7の変更点や追加機能を説明しました。プロジェクトカスタマイズ機能や速度改善、Angular Material／Angular Elementsの機能追加など、全体的に完成度をより高めたリリースといえます。

　次回は、ページの初期表示や検索エンジン最適化（SEO）に有効な、Angularのサーバーサイドレンダリング機能を説明します。

参考資料

• Angular
• Angular CLI