Progress® Telerik® Reporting R3 2018

Localization

The article elaborates on how to localize the messages displayed by the Angular Report Viewer.

  1. To localize the report viewer, create a new TypeScript file stringResources.ts:

    TypeScript
    export class StringResources {
        static english = {
            loadingReport: 'Loading...',
            // override other string resources here
        }
    
        static japanese = {
            loadingReport: 'ちょっと、まってください...',
            // override other string resources here
        }
    
        // override string resources for other cultures here
    }

    The file can contain all or only part of the string resources which would be localized. For a full list of the report viewer string resources which could be localized please refer to HTML5 Report Viewer Localization.

  2. Import the new file in the component where the viewer is used:

    TypeScript
    import { StringResources } from './stringResources';
  3. Implement AfterViewInit and extend the viewer object with the string resources for the desired culture:

    TypeScript
    import { AfterViewInit, Component, ViewChild } from '@angular/core';
    import { TelerikReportViewerComponent } from '@progress/telerik-angular-report-viewer';
    import { StringResources } from './stringResources';
    ...
    
    export class AppComponent implements AfterViewInit {
      @ViewChild('viewer1') viewer: TelerikReportViewerComponent;
    
      ngAfterViewInit(): void {
        const language = navigator.language;
        let resources = StringResources.english; // default
    
        if(language === 'ja-JP'){
          resources = StringResources.japanese;
        }
    
        this.viewer.viewerObject.stringResources = Object.assign(this.viewer.viewerObject.stringResources, resources);
      }
    }
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy