編集ページをつくる」の作例にさらに手を加えます。配列のデータからリストの要素を組み立てて、クリックされた項目の情報を表示します。テンプレートからつくられた要素に、スタイルを割り当てます。編集ページをつくる」で書いたコード002のコンポーネントのモジュール(app.component.ts)に手を加えます。メソッド引数のデフォルト値と省略および定数を定める」03「定数を定める」参照)。つぎに、コンポーネントのクラス(AppComponent)のプロパティ(heroines)に、その定数の参照を収めました。HEROINES;}そして、デコレータ(@Component)宣言に渡すオブジェクトのテンプレート(template)は、つぎのように書き替えます。もとのデータひとつのテンプレートも少し直してあとで使いますので、宣言の外に出してコメントアウトしておきましょう。<li>要素にはngForディレクティブを加えました。複数のデータ(heroines)から項目(heroine)をひとつずつ取り出し、テンプレートにしたがってすべての要素を差し込みます。頭のアスタリスク*は、ディレクティブの与えられた要素(<li>)のノード以降がテンプレートとなることを示します。{}ビルドして試すと、コンポーネントのクラス(AppComponent)に与えられたプロパティ(heroines)の配列エレメントがすべて取り出され、つぎの図001のようにテンプレートの定めにしたがって値はリスト表示されます。デコレータ関数でスタイルを割り当てるコンポーネントのクラス(AppComponent)に宣言したデコレータ(@Component)は、引数のオブジェクトでHTMLのテンプレートを定めるだけでなく、スタイルを割り当てることもできます。その場合、つぎのように引数のオブジェクトにstylesプロパティを加え、CSSは文字列で与えます。{}ビルドして確かめると、つぎの図002のようにリストにスタイルが割り当てられました。:hover擬似クラスも加えましたので、マウスポインタを重ねると項目のスタイルが変わります。CSSファイルを別につくるのは、もう少しあとの課題になります。ここまで手を加えたコンポーネントのモジュール(app.component.ts)は、一旦以下のコード001にまとめておきます。クリックした項目の情報を表示するリストの項目をクリックしたら、その情報を取り出して示しましょう。クリックを受け取るイベントはclickで、つぎのようにタグの中に丸括弧()にくくって、呼び出す関数を与えます。要素(<li>)をクリックすると、コンポーネント(AppComponent)に定めたコールバック関数(onSelect())が呼び出されるのです。受け取る引数(heroine)は、新たに加えたクラスのプロパティ(selectedHeroine)に納めました。確認のconsole.log()メソッドで、その値がわかります。確認用}}項目をクリックすると、たとえばつぎのようにその情報をプロパティとして含むオブジェクトがコンソールに示されます。このオブジェクトがクラス(AppComponent)のプロパティ(selectedHeroine)に納められたということです。"ナウシカ"}では、はじめにコメントアウトしていたテンプレートを手直しして戻しましょう。参照する項目のオブジェクトを、つぎのように新たなプロパティ(selectedHeroine)で置き替えれば、選ばれた項目の情報が示されるはずです。placeholder="名前"></div>*/ところが、ビルドして確かめると、エラーで正しく動きません。その中には、つぎのような指摘が見つかります。理由は、項目をクリックするまでプロパティ(selectedHeroine)にオブジェクトがないからです。初期値のオブジェクトを入れておく、というのもひとつの解決でしょう。ここでは、値がないときは要素をつくらない、つまり表示しないことにします。undefined要素をつくるかどうかは、つぎのようにngIfディレクティブに条件を加えて決められます。その値(selectedHeroine)がfalseと評価されれば、その要素の処理はされず、除かれます。頭のアスタリスク*は、ディレクティブの与えられた要素(<div>)のノード以降がテンプレートとなることを示します。プロパティ値がない(undefined)とき、そのノードは表示されないということです。heroine;}}これでビルドして試せば、エラーなくリストは表示されます。項目をクリックするとリストの下に情報が出てくるという流れです(図003)。この作例ではすでにリストに示されている情報(idとname)しかありません。データを加えたら、それを示すこともできるということでご理解ください。選んだリスト項目のスタイルを変える今は、クリックしたリストの項目からマウスポインタを外してしまうと、どれを選んだのかわかりません。その項目のスタイルを変えて、どの情報が示されているのか明らかにしましょう。選択された項目のスタイルは、すでにつぎのようにデコレータ(@Component)宣言に渡すオブジェクトのstylesプロパティに定めてありました。templateプロパティのHTML要素の中にはこのclass属性(selected)が見当たりません。選ばれた要素に動的にクラスを割り当てるつもりだからです。binding」参照)。テンプレート(template)のタグの中で、つぎのように[]にくくったclassの参照にクラス名()を添えます。trueと評価される式を与えるとそのクラスが加わり、falseであれば除かれます。ここでは、その要素のオブジェクト(heroine)が、選択された項目(selectedHeroine)かどうかで判定しています。{}ビルドして確かめると、選択したリストの項目のスタイルがつぎの図004のように変わります。その項目にマウスポインタを重ねたとき(:hover)のスタイルも別に定めてありました。ここまで書き上げたコンポーネントのモジュールは、以下のコード002にまとめます。併せて、Plunkerに作例のコードを掲げました。