Angular Pivot Table localization

Translate the pivot table to the end-users native language to provide them with the best reporting experience.

import { Component, OnInit, ViewChild } from "@angular/core";
import { FlexmonsterPivot } from "ng-flexmonster";

@Component({
  selector: "pivotComponent",
  templateUrl: "./pivot.component.html",
  styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
  @ViewChild("pivot") pivot!: FlexmonsterPivot;

  public report: Object = {
    dataSource: {
      type: "csv",
      filename: "data/data-en.csv",
    },
    slice: {
      rows: [{
        uniqueName: "Category"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price",
        aggregation: "sum",
        format: "currency"
      }]
    },
    formats: [{
      name: "",
      thousandsSeparator: ",",
      decimalSeparator: ".",
      decimalPlaces: 2,
    }, {
      name: "currency",
      currencySymbol: "$",
    }]
  };

  currentLang = "en";

  pdfFonts: any = {
    en: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
    fr: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
    it: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
    es: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
    pt: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
    zh: "https://cdn.flexmonster.com/fonts/NotoSansCJKsc-Regular.ttf",
    uk: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  };

  constructor() {}

  ngOnInit(): void {}

  setLocalization(lang: string) {
    this.currentLang = lang;
    this.pivot.flexmonster.setReport({
      dataSource: {
        type: "csv",
        filename: "data/data-" + lang + ".csv",
      },
      localization: "loc/" + lang + ".json",
      formats: [{
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 2,
        currencySymbol: "$",
      }]
    });
  }

  customizeToolbar(toolbar: Flexmonster.Toolbar) {
    toolbar.exportHandler = (type) => {
      if (type === "pdf") {
        this.pivot.flexmonster.exportTo(type, {
          fontUrl: this.pdfFonts[this.currentLang],
        });
      } else {
        this.pivot.flexmonster.exportTo(type);
      }
    };
    toolbar.showShareReportTab = true;
  }
}

<button (click)="setLocalization('en')">EN</button>
<button (click)="setLocalization('fr')">FR</button>
<button (click)="setLocalization('it')">IT</button>
<button (click)="setLocalization('es')">ES</button>
<button (click)="setLocalization('pt')">PT</button>
<button (click)="setLocalization('zh')">ZH</button>
<button (click)="setLocalization('uk')">UK</button>

<fm-pivot
  #pivot
  [componentFolder]="'https://cdn.flexmonster.com/'"
  [height]="430"
  [toolbar]="true"
  [report]="report"
  [shareReportConnection]="{url: 'https://olap.flexmonster.com:9500'}"
  (beforetoolbarcreated)="customizeToolbar($event)">
</fm-pivot>

All text elements can be renamed or translated into the language of your choice: match labels, text messages, pop-ups and captions to the language of your Angular reporting software.

You can quickly translate the whole component into Spanish, German, Mandarin, Thai and other 9 languages simply by adding one link into your code. The full list of the ready-made localizations for our Angular data grid you can check in the how to localize the component guide.

If you didn’t manage to find the required localization you can create your own. All you need to do is to rewrite a JSON file with key-value pairs, where a key is the component’s element and value is the translation of its text into the respective language.

You can also translate the entire component using global settings or override localization only for specific reports of your Angular data visualization solution.

Themes Heat map

Angular Pivot Table localization

See our live examples