Localization Overview

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:

   TS

   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 that could be localized, please refer to HTML5 Report Viewer Localization.

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

   TS

   import { StringResources } from './stringResources';

3. In the component class, implement the OnInit lifecycle hook to set the localization resources for the desired culture:

   TS

   import { Component, OnInit } from '@angular/core';
   import { StringResources } from './stringResources';
   
   export class AppComponent implements OnInit {
       localizationResources: any;
   
       ngOnInit(): void {
           const language = navigator.language;
           switch (language) {
               case 'ja':
                   this.localizationResources = StringResources.japanese;
                   break;
               default:
                   this.localizationResources = StringResources.english;
                   break;
           }
       }
   }

4. Bind the localizationResources property to the viewer component in the template:

   HTML

   <!--region AngularViewerLocalizationTemplate-->
   <tr-viewer #viewer1
       [localizationResources]="localizationResources"
       [serviceUrl]="'http://localhost:59657/api/reports/'"
       [reportSource]="{
           report: 'Dashboard.trdx',
           parameters: {}
       }"
       [viewMode]="'INTERACTIVE'"
       [scaleMode]="'SPECIFIC'"
       [scale]="1.0">
   </tr-viewer>
   <!--endregion-->

   The localizationResources input passes the string resources to the viewer during initialization, ensuring that all viewer areas (toolbar, content area, info messages) are properly localized.