Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
Angular TIPS

Angular TIPS

コンポーネント要素に属性/イベントをバインドするには?(hostパラメーター)

2018年2月16日

@Componentデコレーターのhostパラメーターを使って、コンポーネント要素そのものに属性やイベントをバインドする方法を説明する。

  • このエントリーをはてなブックマークに追加

【対応バージョン】 Angular 5以降。v5時点で執筆しました。

 (テンプレート内の要素ではなく)コンポーネント要素そのものに属性やイベントをバインドするには、@Componentデコレーターのhostパラメーターを利用します。

 例えば以下は、AppComponentコンポーネントに対して、以下の設定を施す例です。

  • role属性にmain*1を設定
  • clickイベントに対して、イベントハンドラーonclickをバインド
  • class属性にtipsを設定
  • *1 ドキュメントの主要なコンテンツであることを意味します。

 具体的なコードを以下に示します。

TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Hello {{name}}</h1>`,
  styleUrls: ['./app.component.css'],
  // コンポーネント要素への設定
  host: {
    '(click)': 'onclick($event)',
    'role': 'main',
    '[class.tips]': 'true',
  }
})
export class AppComponent {
  name = 'Angular';
  onclick(e: any) {
    console.log(e.target);
  }
}
コンポーネント要素に対して属性/イベントハンドラーを設定するコード(app.component.ts)
コンポーネントの領域をクリックするとログを出力

 サンプルを実行し、生成されたコードはブラウザーの開発者ツール(Chromeであれば[Elements]タブ)から確認できます。以下のように、コンポーネント要素にrolestyleなどの属性が付与されていること、ブラウザー画面上でコンポーネントの領域をクリックすると、ログが出力されることを確認してください。

HTML
<app-root role="main" _nghost-c0="" ng-version="5.2.3" class="tips">
  <h1 _ngcontent-c0="">Hello Angular</h1>
</app-root>
コンポーネント(要素)に属性が設定された(開発者ツール)

 hostパラメーターには、「属性名: 値」のハッシュ形式で付与したい属性を渡します。テンプレートに対するのと同じく、[class.tips](click)のようなバインド構文も利用できます。

処理対象:コンポーネント(Component) カテゴリ:基本
API:@Component|host カテゴリ:@angular > core > Component decorator(コンポーネントデコレーター)

※以下では、本稿の前後を合わせて5回分(第39回~第43回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

Angular TIPS
39. フォームにチェックボックスのリストを設置するには?

選択肢の中から複数を選択する「チェックボックスのリスト」を設置するための基本的な方法を解説する。

Angular TIPS
40. コンポーネントからページのタイトルを操作するには?(Title)

Titleサービスを使って、コンポーネントからページタイトルを設定する方法を説明する。

Angular TIPS
41. 【現在、表示中】≫ コンポーネント要素に属性/イベントをバインドするには?(hostパラメーター)

@Componentデコレーターのhostパラメーターを使って、コンポーネント要素そのものに属性やイベントをバインドする方法を説明する。

Angular TIPS
42. 文字列によって表示を切り替えるには?(i18nSelect)

i18nSelectパイプを使って、文字列値によってテキスト表示内容を切り替える方法を説明する。

Angular TIPS
43. ページング処理を実装するには?(ngFor/slice)

ngForディレクティブとsliceパイプを使って、ページャー(=ページングのためのリンクリスト)を実装する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!