Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

AngularMaterialのPaginatorを日本語化する

More than 1 year has passed since last update.

AngularMaterialのPaginatorを日本語化する方法を紹介します。
公式ドキュメントにざっくりと方法が記載されているのですが、具体的な手順がなかったので、試してみた結果を残しておきます。

日本語化前

スクリーンショット 2017-11-11 20.15.52.png

日本語化後

スクリーンショット 2017-11-11 20.34.36.png

環境

今回紹介する内容は、次の環境で試しました。

$ ng -v
@angular/cli: 1.4.9
node: 8.8.1
os: darwin x64
angular/material@2.0.0-beta.12

※最新のAngular5(angluar-cli v1.5.0 + AngularMaterial v5.0.0-rc0)の組み合わせでは未検証です

手順

MatPaginatorIntlを継承したクラスを作成する

ファイル追加

まずは、新規でファイルを追加します。
今回は、app/sharedにMatPaginatorIntlJaとういクラスを作成しました。

angluar-cliでクラスを作成します。

$ ng g class shared/matPaginatorIntlJa 

ファイル名は、mat-paginator-intl-ja.tsとなりました。

実装

継承元のクラスは、以下のソースを参考にしました。
GitHub -material2/src/lib/paginator/paginator-intl.ts

mat-paginator-intl-ja.ts
import { MatPaginatorIntl } from '@angular/material';

export class MatPaginatorIntlJa extends MatPaginatorIntl {
  itemsPerPageLabel = '件数';
  nextPageLabel     = '次へ';
  previousPageLabel = '戻る';

  getRangeLabel = (page: number, pageSize: number, length: number) => {
    if (length === 0 || pageSize === 0) { return `${length} 件中 0`; }

    length = Math.max(length, 0);

    const startIndex = page * pageSize;

    const endIndex = startIndex < length ?
      Math.min(startIndex + pageSize, length) :
      startIndex + pageSize;

    return `${length} 件中 ${startIndex + 1} - ${endIndex}`;
  }
}

MatPaginatorIntlクラスを継承して、それぞれのラベルの値をメンバ変数またはメソッドをオーバーライドして変更します。getRangeLabelメソッドは、上記「日本語化前」のスクリーンショットの11 - 20 of 100の部分の表示を行うものです。

app.module.tsで読み込み

MatPaginatorModuleに加え、MatPaginatorIntlモジュールをインポートし、今回作成した多言語化用クラスを次@NgModuleのprovidersに次のように追加します。

app.module.ts
import { MatPaginatorModule, MatPaginatorIntl } from '@angular/material';
import { MatPaginatorIntlJa } from './shared/mat-paginator-intl-ja';
...
providers: [
     ...
    { provide: MatPaginatorIntl, useClass: MatPaginatorIntlJa }
  ]
...

以上で、日本語化されているかと思います。

参考

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