AngularMaterialのPaginatorを日本語化する

7863 ワード
angularMaterial Angular Angular テキストリンク

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

日本語化前

日本語化後

環境

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

$ ng -v
@angular/cli: 1.4.9
node: 8.8.1
os: darwin x64

angular/[email protected]

※最新の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 }
  ]
...

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

参考