Flexmonster Software License Agreement (“Agreement”) has been revised and is effective as of January 8, 2025.
The following modifications were made:
The modified version of Agreement is available here.
Downloading, installing, and/or continuing to use Flexmonster Software after January 8, 2025, constitutes Licensee’s acceptance of the terms and conditions of the modified version of Agreement. If Licensee does not agree to any of these terms and conditions, they must cease using Flexmonster Software and must not download, install, use, access, or continue to access Flexmonster Software. By continuing to use Flexmonster Software or renewing the license or maintenance after the effective date of these modifications to Agreement, Licensee accepts and agrees to be bound by the terms and conditions of the modified Agreement.
Translate the pivot table to the end-users' native language and 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: "https://cdn.flexmonster.com/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 languages by simply adding one link to your code. The full list of the ready-made localizations for our Angular data grid can be found in the Localizing the component guide.
If you didn’t manage to find the required localization, you can create your own. All you need is to rewrite a JSON file with key-value pairs, where a key is the component’s element and a 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.