Angular.jsのチュートリアルをして遊ぼう ②コンポーネント - ビール片手にプログラム～そうだ！遊ぼう！～

今回は前回の続きでAngular.jsの公式サイトのチュートリアルのコンポーネントの箇所を実施して遊ぼうと思います。
前回の記事で使用したコードを前提に作成していきますので、まず前回の記事から見ていただいたほうが良いかと思います。

前回に引き続き、北海道ビールです。
苦味とのど越しがいいですね。

私はただ備忘録として、遊んだ結果を書きたいだけなので、本気でやりたい方はこちらを参考にされたほうが良いかと思います。

コンポーネントとは要するにUIを再利用するために作成するパーツのことです（ざっくり）
前回使用したproduct-list.componentもまさにコンポーネントでして、コンポーネントは3つの要素から成り立ちます。

① コンポーネントクラス：データと機能を処理する要はJS
② HTMLテンプレート：UIのHTML
③ コンポーネント固有のスタイル：UIのCSS

product-list.componentだとこういった構成になります。

ここからは新しく商品アラートコンポーネントを作成していきます。

appディレクトリを右クリックして「Angular Generator」の「Component」をクリックします。

表示された入力フォームに「product-alerts」と入力します。

products-alertsのスターターファイルが作成されました。

親コンポーネント（今回でいえばproduct-list）から商品情報を受け取るよう、product-alerts.component.tsを修正していきます。

①2行目に下記を追記します。

import { Input } from '@angular/core';

②親コンポーネントから受け取るプロパティ名を指定します。

@Input() product;

product-alerts.component.htmlの中身を下記に書き換えます。

<!-- 価格が700円より大きい場合表示します。-->
<p *ngIf="product.price > 700">
  <button>Notify Me</button>
</p>

product-listに上記で作成した、product-alertsコンポーネントを表示するよう修正します。

  <app-product-alerts [product]="product"></app-product-alerts>

[Notify Me]をクリックしたときにproduct-listコンポーネントまでイベントを発行するよう、product-alertsコンポーネントを設定します。
通知動作はproduct-listコンポーネントで定義します。

親コンポーネントへイベントを渡せるよう、product-alerts.component.tsを修正していきます。

①3行目に下記を追記します。

import { Output, EventEmitter } from '@angular/core';

②親コンポーネントへ渡すイベントを定義します。

@Output() notify = new EventEmitter();

notify.emit()メソッドを呼び出すイベントバインディングを設定します。

<button (click)="notify.emit()">Notify Me</button>

[Notify Me]ボタン押下時のイベントを設定します。

  onNotify() {
    window.alert('You will be notified when the product goes on sale');
  }

product-alertsコンポーネントから、イベントを受け取れるよう、product-list.component.htmlを修正します。

<app-product-alerts
  [product]="product" 
  (notify)="onNotify()">
</app-product-alerts>

Notify Meボタンを押下すると。。イベントが実行されました！

今回はチュートリアルにあるとおり、コンポーネントを使用しました。
親コンポーネントと子コンポーネントのInput、Outputの概念は少し分かりにくかったのですが、下記サイトを見ると分かりやすかったです。 dev.classmethod.jp

次回はルーティングが出来たらいいなと思います。