More than 5 years have passed since last update.

Angular6でソート機能、ページング機能付きの表(テーブル)を作成したいと考えている開発者向けのサンプル

Last updated at 2018-09-19Posted at 2018-09-18

Ng6UdmMockMatConsumer Angular6でソート機能、ページング機能付きの表(テーブル)を作成したいと考えている開発者向けのサンプル

Ng6UdmMockMatConsumer は、Angular6においてソート機能、ページング機能付きの表(テーブル)を実現しようと考えている開発者向けのサンプルです。

ビデオ解説 (日本語),
https://youtu.be/AsVctVk0Hxk

Ng6UdmMockMatConsumer は表(テーブル)作成のサンプルであり、Angular6におけるAngular Materialに依存しています。
Ng6UdmMockMatConsumer は、mat-table, mat-paginator, mat-sort などを利用しています。
Ng6UdmMockMatConsumer は、JsonPlaceholderサイトにアクセスするためのng6-udm-mock（ver3.0.2）サービスライブラリを利用しています。

以下のように、Gitからクローンを作成します。

$ git clone https://github.com/Ohtsu/ng6-udm-mock-mat-consumer.git

次に生成されたng6-udm-mock-mat-consumerディレクトリに入り、以下のようにインストールを行います。

$ npm install

コマンドラインで以下のようにローカルサーバを起動すると、JsonPlaceholderサイトのコメントデータを取得し、各列ごとのソート機能、ページング機能並びにページ内表示行数の設定機能を付加した表が表示されます。

$ ng serve -o

"Schematics",
https://material.angular.io/guide/schematics
"JsonPlaceholder",
https://jsonplaceholder.typicode.com/
"Angular 5, Angular 6 Custom Library: Step-by-step guide",
https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/
"Angular 5, Angular 6用カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド",
https://www.udemy.com/angular5-l/
"ng6-udm-mock Angular6 Service Library to use JsonPlaceholder and json-server",
https://www.npmjs.com/package/ng6-udm-mock
"Reactive Programming with RxJS 5: Untangle Your Asynchronous JavaScript Code", 2018/2/15,Sergi Mansilla
https://www.amazon.co.jp/Reactive-Programming-RxJS-Asynchronous-JavaScript/dp/1680502476/ref=sr_1_7?ie=UTF8&qid=1537063252&sr=8-7&keywords=reactive+programming
"Angular Material Data Table: A Complete Example", Angular University
https://blog.angular-university.io/angular-material-data-table/
"Angular 5 Data Table Example(Pagination+Sorting+Filtering)", 2018/01, Dhiraj Ray
https://blog.angular-university.io/angular-material-data-table/