Localization in EJ2 Angular Diagram Component
25 Aug 202518 minutes to read
The EJ2 Angular Diagram component supports localization functionality, allowing developers to adapt the user interface to different languages and regions. The diagram’s symbol palette search box and context menu items can be localized based on the selected culture. Use the locale property of the diagram to specify the desired culture for localization.
Localize Diagram context menu
To localize the diagram context menu, define the locale property of the diagram with the preferred culture. The example below demonstrates localization using ‘de-DE’, the locale code for German as used in Germany.
import { Component, ViewChild, OnInit } from '@angular/core';
import { DiagramModule, DiagramContextMenuService } from '@syncfusion/ej2-angular-diagrams';
import { Diagram, DiagramContextMenu, ContextMenuSettingsModel } from '@syncfusion/ej2-diagrams';
import { setCulture, L10n } from '@syncfusion/ej2-base';
@Component({
providers: [DiagramContextMenuService],
selector: 'app-container',
template: `<ejs-diagram id="diagram" width="100%" height="580px"
[locale]="locale" [contextMenuSettings]="contextMenuSettings"></ejs-diagram>`,
})
export class AppComponent implements OnInit {
@ViewChild("diagram")
public locale: string = 'de-DE';
public contextMenuSettings: ContextMenuSettingsModel = {
show: true
};
ngOnInit(): void {
// Component initialization logic here
}
}Next, call the setCulture('de') function to set the default culture for all EJ2 components. This method accepts one parameter, cultureName, which specifies the culture name to be set as the default.
Define the localized text for the context menu items to replace the default English text:
// 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 demonstrates the complete 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
Enable the search functionality in the symbol palette using the enableSearch property. The search box supports localization to match the application’s target language.
To localize the symbol palette search box, define the locale property of the symbol palette with the preferred culture. The example below uses ‘de-DE’ for German localization.
The following code demonstrates symbol palette localization:
// Set the default culture to German
setCulture('de');
// Load locale text for the SearchShapes
L10n.load({
'de-DE': {
SymbolPalette: {
'SearchShapes': 'Formen suchen',
}
}
});
// Initialize symbol palette
ngOnInit(): void {
this.expandMode = 'Multiple';
this.palettes = [{
// Sets the id of the palette
id: 'basic',
// Sets whether the palette expands/collapses 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',
}];
}The following code example shows the complete 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));For comprehensive information about localization implementation across all Syncfusion components, refer to the localization documentation.