AngularMaterialのPaginatorを日本語化する方法を紹介します。
公式ドキュメントにざっくりと方法が記載されているのですが、具体的な手順がなかったので、試してみた結果を残しておきます。
日本語化前
日本語化後
環境
今回紹介する内容は、次の環境で試しました。
$ 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 }
]
...
以上で、日本語化されているかと思います。