Ignite UI for Angularアプリケーションテンプレートの紹介

<p>こんにちは。インフラジスティックス・ジャパン株式会社テクニカルコンサルティングエンジニアのoquironです。</p>
<p>この記事では、アプリケーションでよくある利用シナリオを <a href="https://jp.infragistics.com/products/ignite-ui-angular" target="_new" rel="noopener noreferrer">Ignite UI for Angular</a> を使ってコンパクトに実現したアプリケーションサンプルをご紹介します。実際のアプリケーション開発の参考になる内容が盛りだくさんのサンプルなので、ぜひ活用してください。</p>
<p>では、さっそくご紹介していきましょう。</p>

#Ignite UI for Angular アプリケーションテンプレートとは
<p>Ignite UI for Angular アプリケーションテンプレートとは、アプリケーションでよくある利用シナリオを Ignite UI for Angular を使ってコンパクトに実現したサンプルです。具体的には、</p>
- ナビゲーション機能
- ダッシュボード
    - 棒グラフや円グラフを使ったデータの可視化
- データ一覧表示
    - データの一覧表示や編集、削除
    - 編集テンプレートによる日付ピッカーやドロップダウンの埋め込み
    - 編集内容の Undo や Redo、コミット
    - データの選択（1 件のみの選択、複数選択、全件選択）
    - データのソート
    - データのフィルタリング
    - データのグループ化
    - 列の表示順入れ替え
    - 列の固定表示
    - Excel や CSV 形式での出力
- 入力フォーム
    - 入力フォーム形式でのデータの表示や編集
    - 入力された値のチェック
- データ管理サービス
    - 個別の画面でのデータ更新内容を別画面にも即座に反映させるためのデータ管理サービス

<p>が実装されています。</p>

<b>ダッシュボード</b>
![IGBlog26006613648827770_Dashboard_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/9e5a70ff-2b37-97f3-1780-9027cb9f4b1c.png)

<b>データ一覧表示</b>
![IGBlog26006613648827770_DataTable_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/6989bad7-825a-7255-0d7b-97fb236f8664.png)

<b>入力フォーム</b>
![IGBlog26006613648827770_Form_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/6b378d2b-55b1-a564-d6f3-b4e9b978dfb6.png)


<p>では、個別に見ていきましょう。</p>

#ナビゲーション機能
<p> アプリケーションテンプレートでは、ヘッダー部分に <a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/navbar" target="_new" rel="noopener noreferrer">IgxNavbar</a>、左側の開閉メニューに <a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer" target="_new" rel="noopener noreferrer">IgxNavigationDrawer</a> を使用しています。</p>
<p>IgxNavbar の左端のハンバーガーメニュー（※横棒三本のアイコンのことです）をクリックすると、IgxNavigationDrawer 部分が開いたり閉じたりするような実装を実現しています。 </p>
![IGBlog26006613648827770_Navigation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/878b2bd9-fa5c-6efc-39a5-6bd39b4af398.png)

#ダッシュボード
<p>ダッシュボードでは、データ管理サービスからデータを受け取って、年齢、血液型、性別で集計し、それぞれ棒グラフ、ドーナツチャート、円グラフで表示しています。 </p>
<p>集計処理はデータを 1 件 1 件ループして地道にカウントしています。</p>
<p>全体のレイアウトは Ignite UI for Angular の <a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/card" target="_new" rel="noopener noreferrer">IgxCard</a> を使用しており、グラフ本体は <a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/data-chart-type-category-column-series" target="_new" rel="noopener noreferrer">IgxDataChart</a>、<a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/doughnut-chart" target="_new" rel="noopener noreferrer">IgxDoughnutChart</a>、<a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/pie-chart" target="_new" rel="noopener noreferrer">IgxPieChart</a> をそのまま使用して実現しています。Ignite UI for Angular を使用すれば特別なことをしないでもこのようなグラフやレイアウトが簡単に実現できます！</p>
![IGBlog26006613648827770_Dashboard_Layout.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/a56a2472-e740-1bba-86ea-bc3824a69440.png)

#データ一覧表示
<p>データ一覧表示では、<a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid" target="_new" rel="noopener noreferrer">IgxGrid</a> を使って表示しています。</p>
<p>一覧上部の Redo や Undo などのボタンやエクスポートボタン部分は、<a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/toolbar" target="_new" rel="noopener noreferrer">Grid ツールバーコンテナ</a>を使用しています。Redo / Undo 機能や「エクスポート」機能は、IgxGrid の<a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/batch-editing" target="_new" rel="noopener noreferrer">トランザクション機能</a>やツールバーコンテナの組み込み機能をそのまま利用して簡単に実装できます。</p>
<p>その他、編集、選択、ソート、グループ化、列移動、等々、ほぼすべての機能は IgxGrid に組み込みのものをそのまま使用しています。</p>
<p>また、性別や血液型は、ドロップダウンから選択できるように、<a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/select" target="_new" rel="noopener noreferrer">IgxSelect</a> をエディターテンプレートとして埋め込んでいます。生年月日も同様に、<a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/date-picker" target="_new" rel="noopener noreferrer">IgxDatePicker</a> を使って、カレンダーから日付を選択する形式になっています。</p>
![IGBlog26006613648827770_DataTable_Features.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/810d0ee3-1f21-cd69-80a6-f09c85c9baa7.png)

#入力フォーム
<p>入力フォームでは、<a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/list" target="_new" rel="noopener noreferrer">IgxList</a> を使用して画面左側に名前の一覧を表示し、その中から一つをクリックすると画面右側に編集フォームが表示されます。編集フォームでは、<a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/input-group" target="_new" rel="noopener noreferrer">IgxInputGroup</a> を使用しています。編集後、「更新」ボタンをクリックすると、データソース側に反映されます。</p>
![IGBlog26006613648827770_Form_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784790/58d71b3d-609d-c112-8b5e-f47800aebd05.png)

#データ管理サービス
<p>各画面はそれぞれ独立したコンポーネントになっています。各画面で更新された情報は、別画面に移ったときに即座に反映されるように、RxJS を使って受け渡しをしています。それを管理しているのがデータ管理サービスです。</p>
<p>サンプルのソース内では、...states\state.service.ts で実装していますので、ダウンロードした際には見てみてください。</p>

#ダウンロード
<p>Ignite UI for Angular アプリケーションテンプレートのダウンロードは<a href="https://jp.infragistics.com/products/ignite-ui-angular/download/angular-app-template" rel="noopener noreferrer" target="_new">こちら</a>です。</p>
<p>またこの記事に関して何かご質問・ご不明な点がありましたら、お気兼ねなく<a href="https://jp.infragistics.com/about-us/contact-us" rel="noopener noreferrer" target="_new">弊社</a>までお問い合わせください。</p>