Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

MIT License

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

フルソースコード,
https://github.com/Ohtsu/ng6-udm-mock-mat-consumer

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

ビデオ解説 (英語),
https://youtu.be/qt6TsDoQR7g

概要

  • Ng6UdmMockMatConsumer は表(テーブル)作成のサンプルであり、Angular6におけるAngular Materialに依存しています。

  • Ng6UdmMockMatConsumer は、mat-table, mat-paginator, mat-sort などを利用しています。

  • Ng6UdmMockMatConsumer は、JsonPlaceholderサイトにアクセスするためのng6-udm-mock(ver3.0.2)サービスライブラリを利用しています。

稼働環境

  • node.js
  • Typescript2
  • Angular6
  • Angular Material
  • ng6-udm-mock

インストール

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

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

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

$ npm install 

起動

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

$ ng serve -o
  • 初期画面

バージョン

  • Ng6UdmMockMatConsumer : 0.1.0
  • Angular6 : 6.0.3
  • TypeScript : 2.7.2
  • @angular/material : 6.4.7
  • ng6-udm-mock : 3.0.2

参考

変更履歴

  • 2018.9.18 version 0.1 uploaded

著作権

copyright 2018 by Shuichi Ohtsu (DigiPub Japan)

License

MIT © Shuichi Ohtsu

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away