Get Free Trial
List of all demos

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",
        },
        options: {
          configuratorActive: false,
        },
      };
    
      public currentLang = "en";
    
      public pdfFonts: Object = {
        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 {}
    
      onReady() {
        this.pivot.flexmonster.setReport(this.report);
      }
    
      setLocalization(lang: string) {
        this.currentLang = lang;
        this.pivot.flexmonster.setReport({
          dataSource: {
            type: "csv",
            filename: "data/data-" + lang + ".csv",
          },
          localization: "loc/" + lang + ".json",
        });
      }
    }
    
    <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 [toolbar]="true" 
    [height]="430" [width]="'100%'" (ready)="onReady()" 
    [componentFolder]="'https://cdn.flexmonster.com/'" [report]="report"></fm-pivot>
    
    .loc-container{
       margin: 7px;
    }
    
    .btn-localization {
      height: 50px;
      width: 90px;
      border-radius: 5px;
      background-color: #F5F5F5;
      border: 1px solid #F5F5F5;
      position: relative;
      margin: 0 10px 10px 0;
    }
    
    .btn-localization:hover {
      background-color: #DF3800;
      border: 1px solid #DF3800;
      color: white;
    }
    
    .btn-localization > * {
      vertical-align: middle;
    }
    
    .loc-img {
      width: 30px;
      margin-right: 10px;
      border: 1px solid white;
      border-radius: 2px;
    }
    
    .active-btn {
      background-color: #DF3800;
      border: 1px solid #DF3800;
      color: white;
    }
    
    .active-btn .loc-img {
      border: 1px solid white;
    }
    
    .active-btn::after {
      content: '';
      position: absolute;
      top: 100%;
      left: calc(50% - 7px);
      background: #DF3800;
      width: 15px;
      height: 7px;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
    

    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.