Localization in Angular Dialog component

26 Feb 20263 minutes to read

Use the localization library to localize the default text content of the Dialog. The close button’s tooltip text is localized based on the selected culture.

Locale key	en-US (default)
close	Close

Loading translations

Load translation objects in an application using the load function of the L10n class.

The following sample sets the French culture for the Dialog and changes the close button’s tooltip text.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DialogModule } from '@syncfusion/ej2-angular-popups'



import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { L10n } from '@syncfusion/ej2-base';
import { EmitType } from '@syncfusion/ej2-base';

@Component({
imports: [
        
		DialogModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
    <button class="e-control e-btn" style="position: absolute;" id="targetButton" (click)="onOpenDialog($event)">Open Dialog</button>
    <div #container class='root-container'></div>
      <ejs-dialog id='dialog' #ejDialog locale='fr-BE' showCloseIcon='true' header='Dialogue' content='Dialogue avec la culture française' [target]='targetElement' width='250px'>
      </ejs-dialog>
        `
})

export class AppComponent implements OnInit {
    @ViewChild('ejDialog') ejDialog: DialogComponent | any;
   // Create element reference for dialog target element.
    @ViewChild('container', { read: ElementRef }) container: ElementRef |any;
    // The Dialog shows within the target element.
    public targetElement?: HTMLElement;
    // Sample level code to handle the button click action
    public onOpenDialog = (event: any): void => {
        // Call the show method to open the Dialog
        this.ejDialog.show();
    }
    ngOnInit() {
      // Load French culture for Dialog close button tooltip text
        L10n.load({
            'fr-BE': {
            'dialog': {
                    'close': "Fermer"
                }
            }
        });
        this.initilaizeTarget();
    }

    // Initialize the Dialog component target element.
    public initilaizeTarget: EmitType<object> = () => {
      this.targetElement = this.container.nativeElement.parentElement;
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));