IgxGrid ローカライズ方法

1. リソース文字列用の igniteui-angular-i18n パッケージをインストールします。

npm install igniteui-angular-i18n

2. Angular 自体で ja-JP ロケールを使用するように登録し、igniteui-angular の方では changei18n 関数で日本語リソースを使用するようにします。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, LOCALE_ID } from '@angular/core';
// Angular で ja ロケールの登録
import { registerLocaleData } from '@angular/common';
import localeJa from '@angular/common/locales/ja';
registerLocaleData(localeJa);

import { changei18n, IgxGridModule } from 'igniteui-angular';
// igniteui-angular のローカライズ
import { IgxResourceStringsJA } from 'igniteui-angular-i18n';
changei18n(IgxResourceStringsJA);

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IgxGridModule
  ],
  providers: [
    // LOCALE_ID のセット
    { provide: LOCALE_ID, useValue: 'ja-JP' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

3. igx-grid に対しては locale プロパティに ja-JP をセットします。

app.component.html

<div style="width: 100vw; height: 100vh;">
  <!-- locale に「ja-JP」をセット -->
  <igx-grid [locale]="'ja-JP'"
            [data]="data"
            [displayDensity]="'compact'"
            [allowFiltering]="true"
            [filterMode]="'excelStyleFilter'"
            [rowSelectable]="true"
            [showToolbar]="true"
            [columnHiding]="true">
    <igx-column *ngFor="let column of columns"
                [field]="column.field"
                [header]="column.header"
                [dataType]="column.dataType"
                [width]="column.width"
                [editable]="column.editable"
                [filterable]="column.filterable"
                [groupable]="column.groupable"
                [hasSummary]="column.hasSummary"
                [movable]="column.movable"
                [pinned]="column.pinned"
                [resizable]="column.resizable"
                [sortable]="column.sortable">
    </igx-column>
  </igx-grid>
</div>

ローカライズ後