Localization in EJ2 Angular Diagram control

10 Dec 202419 minutes to read

The EJ2 Diagram component supports localization. In the Diagram component, the symbol palette search box and context menu items can be localized based on the selected culture. By using the locale property of the diagram, you can change the culture.

Localize Diagram context menu

To localize the diagram context menu, we need to define the locale property of the diagram with our preferred culture. In the example below, we use ‘de-DE’, which is the locale code for German as used in Germany.

import { DiagramModule, DiagramContextMenuService } from '@syncfusion/ej2-angular-diagrams'
import {Diagram,DiagramContextMenu } from '@syncfusion/ej2-diagrams';
import { ContextMenuSettingsModel, Diagram } from '@syncfusion/ej2-diagrams';

Diagram.Inject(DiagramContextMenu);
@Component({
  providers: [DiagramContextMenuService],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram id="diagram" width="100%" height="580px"  [contextMenuSettings]="contextMenuSettings"></ejs-diagram>`,
})

export class AppComponent {
    @ViewChild("diagram")
    public contextMenuSettings?: ContextMenuSettingsModel
    ngOnInit(): void {
      locale: 'de-DE', // Set locale
      contextMenuSettings: {
        show: true, // Enable context menu
      },   
    }
}

Next, we need to call the setCulture('de') function, which sets the default culture for all EJ2 components. This method takes one parameter, cultureName, which specifies the culture name to be set as the default.

We also need to define the text we want to render in the context menu instead of the default English, as shown below.

// Set the default culture to German
setCulture('de')

// Load locale text for the diagram context menu
L10n.load({
  'de-DE': {
    diagram: {
      Cut: 'Corte',
      Copy: 'Copia',
      Paste: 'Pasta',
      Undo: 'Deshacer',
      Redo: 'Rehacer',
      SelectAll: 'Seleccionar todo',
      Grouping: 'Agrupación',
      Group: 'Grupo',
      Ungroup: 'Desagrupar',
      Order: 'Fin',
      BringToFront: 'Traer a delante',
      MoveForward: 'Movimiento adelante',
      SendToBack: 'Enviar a espalda',
      SendBackward: 'Enviar hacia atrás',
    },
  },
});

The following code example summarizes the locale settings for the context menu.

import { L10n, setCulture } from '@syncfusion/ej2-base';
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, ShapeStyleModel, DiagramModule, DiagramContextMenuService  } from '@syncfusion/ej2-angular-diagrams';
import { ContextMenuSettingsModel, NodeModel } from '@syncfusion/ej2-diagrams';
setCulture('de');
L10n.load({
  'de-DE': {
    diagram: {
      Cut: 'Corte',
      Copy: 'Copia',
      Paste: 'Pasta',
      Undo: 'Deshacer',
      Redo: 'Rehacer',
      SelectAll: 'Seleccionar todo',
      Grouping: 'Agrupación',
      Group: 'Grupo',
      Ungroup: 'Desagrupar',
      Order: 'Fin',
      BringToFront: 'Traer a delante',
      MoveForward: 'Movimiento adelante',
      SendToBack: 'Enviar a espalda',
      SendBackward: 'Enviar hacia atrás',
    },
  },
});
@Component({
imports: [
         DiagramModule
    ],
providers: [DiagramContextMenuService],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [locale]='"de-DE"' [getNodeDefaults] ='getNodeDefaults' [contextMenuSettings]="contextMenuSettings">
        <e-nodes>
            <e-node id='node1' [offsetX]=150 [offsetY]=150>
                <e-node-annotations>
                    <e-node-annotation id="label1" content="Rectangle1" [horizontalAlignment]="horizontalAlignment">
                    </e-node-annotation>
                </e-node-annotations>
            </e-node>
            <e-node id='node2' [offsetX]=350 [offsetY]=150>
                <e-node-annotations>
                    <e-node-annotation id="label1" content="Rectangle2" [horizontalAlignment]="horizontalAlignment">
                    </e-node-annotation>
                </e-node-annotations>
            </e-node>
        </e-nodes>
        
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public contextMenuSettings?: ContextMenuSettingsModel
    horizontalAlignment: any;
    ngOnInit(): void {
        //Enables the context menu
        this.contextMenuSettings = {
            show: true,
        }
    }
    public getNodeDefaults(node: NodeModel): void {
        node.height = 100;
        node.width = 100;
       ((node as NodeModel).style as ShapeStyleModel).fill = "#6BA5D7";
       ((node as NodeModel).style as ShapeStyleModel ).strokeColor = "White";
       node.shape = { shape: 'Ellipse'}
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Localize Symbol palette

You can enable the search option in the symbol palette to search for symbols by using the enableSearch option. This search box can also be localized.

To localize the symbol palette search box, we need to define the locale property of the symbol palette with our preferred culture. In the example below, we use ‘de-DE’, which is the locale code for German as used in Germany.

The following code shows how to localize symbol palette.

// Set the default culture to German
setCulture('de')

// Load locale text for the SearchShapes
L10n.load({
        'de-DE': {
            SymbolPalette: {
                'SearchShapes':'Formen suchen',
            }
        }
    });

 // Initializes symbol palette.
     ngOnInit(): void {
        this.expandMode = 'Multiple',
            this.palettes = [{
                //Sets the id of the palette
                id: 'basic',
                //Sets whether the palette expands/collapse its children
                expanded: true,
                //Adds the palette items to palette
                symbols: this.getBasicShapes(),
                //Sets the header text of the palette
                title: 'Basic Shapes',
                iconCss: 'e-ddb-icons e-basic',
                //Sets the locale
            },]
    }

The following code example summarizes the locale settings for the symbol palette.

import { L10n, setCulture } from '@syncfusion/ej2-base';
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import {  DiagramModule,ConnectorModel, SymbolPaletteModule, NodeModel, PaletteModel } from '@syncfusion/ej2-angular-diagrams';
import { ExpandMode } from '@syncfusion/ej2-navigations';
// Set the default culture to German
setCulture('de')
// Load locale text for the SearchShapes
L10n.load({
    'de-DE': {
        SymbolPalette: {
            'SearchShapes': 'Formen suchen',
        }
    }
});

@Component({
    imports: [
        DiagramModule, SymbolPaletteModule
    ],
    providers: [],
    standalone: true,
    selector: "app-container",
    template: `<ejs-symbolpalette [locale]='"de-DE"'id="symbolpalette" width="100%" height="700px"   [expandMode]="expandMode" [palettes]="palettes" [symbolHeight]=80 [symbolWidth]=80 [enableSearch]='true'>
                </ejs-symbolpalette>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public expandMode: ExpandMode = 'Multiple';
    public palettes?: PaletteModel[];
    public getBasicShapes(): NodeModel[] {
        let basicShapes: NodeModel[] = [{
            id: 'Rectangle',
            shape: {
                type: 'Basic',
                shape: 'Rectangle'
            }
        },
        {
            id: 'Ellipse',
            shape: {
                type: 'Basic',
                shape: 'Ellipse'
            }
        },
        {
            id: 'Hexagon',
            shape: {
                type: 'Basic',
                shape: 'Hexagon'
            }
        }
        ];
        return basicShapes;
    };
    getConnectors() {
        var connectors: ConnectorModel[] = [
            {
                id: 'Straight',
                type: 'Straight',
                sourcePoint: { x: 0, y: 0 },
                targetPoint: { x: 60, y: 60 },
                targetDecorator: {
                    shape: 'Arrow',
                    style: { strokeColor: '#757575', fill: '#757575' },
                },
                style: { strokeWidth: 1, strokeColor: '#757575' },
            },
            {
                id: 'Orthogonal',
                type: 'Orthogonal',
                sourcePoint: { x: 0, y: 0 },
                targetPoint: { x: 60, y: 60 },
                targetDecorator: {
                    shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' },
                },
                style: { strokeWidth: 1, strokeColor: '#757575' },
            },
            {
                id: 'Bezier',
                type: 'Bezier',
                sourcePoint: { x: 0, y: 0 },
                targetPoint: { x: 60, y: 60 },
                targetDecorator: {
                    shape: 'Arrow',
                    style: { strokeColor: '#757575', fill: '#757575' },
                },
                style: { strokeWidth: 1, strokeColor: '#757575' },
            }
        ];
        return connectors;
    }
    ngOnInit(): void {
            this.palettes = [{
                //Sets the id of the palette
                id: 'basic',
                //Sets whether the palette expands/collapse its children
                expanded: true,
                //Adds the palette items to palette
                symbols: this.getBasicShapes(),
                //Sets the header text of the palette
                title: 'Basic Shapes',
                iconCss: 'e-ddb-icons e-basic',
                //Sets the locale
            },
            {
                id: 'connectors',
                expanded: true,
                symbols: this.getConnectors(),
                title: 'Connectors',
                iconCss: 'e-ddb-icons e-connector'
            }
            ]
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Refer localization for more information.