Localization of Bold Reports® Angular Report Viewer Classic

Localization of Angular Report Viewer Classic allows you to localize the static text such as tooltip, parameter block, and dialog text based on a specific culture. To render the static text with specific culture, refer to the following corresponding culture script files and set culture name to the locale property of the Report Viewer Classic.

* `ej.localetexts.fr-FR.min.js`
* `ej.culture.fr-FR.min.js`

  • Run the below command, to install the @boldreports/global package.

    npm install @boldreports/global --save

  • Refer to the ej.localetexts.fr-FR.min.js and ej.culture.fr-FR.min.js script files from node_modules in the app.module.ts file .

import { NgModule, enableProdMode, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { BoldReportsAngularModule } from '@boldreports/angular-reporting-components';
import '@boldreports/global/l10n/ej.localetexts.fr-FR.min.js';
import '@boldreports/global/i18n/ej.culture.fr-FR.min.js';
import { AppComponent } from './app.component';
import { TextboxComponent } from './textbox/textbox.component';
...
...

If you import the culture before the BoldReportsAngularModule, you will get the following error in the application. So, you should import the culture after the @boldreports/angular-reporting-components package.

Angular culture error

Initialize the locale property in the component.ts and component.html pages.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [locale]='locale'>
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { BoldReportsAngularModule } from '@boldreports/angular-reporting-components/src/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public locale: string;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'Sales Order Detail.rdl';
        this.locale = "fr-FR";
    }
}