HelpBot Assistant

How can I help you?

Localization in Angular Color Picker component

26 Feb 20265 minutes to read

Localization

The Localization library enables translation of default text used by the ColorPicker. The ColorPicker component includes static text for control buttons (Apply and Cancel) and the mode switcher. These strings can be translated to other languages (Arabic, German, French, etc.) by setting the locale property and providing a translation object.

The following list shows the locale keys and corresponding default text used by the Color Picker.

Locale key words Text
Apply Apply
Cancel Cancel
ModeSwitcher Switch Mode

Loading translations

To load a translation object in an application, use the load function of the L10n class.

The following example demonstrates the ColorPicker configured for German (Deutsch) culture.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component } from '@angular/core';
import { L10n } from '@syncfusion/ej2-base';

L10n.load({
    'de-DE': {
        'colorpicker': {
            'Apply': 'Anwenden',
            'Cancel': 'Abbrechen',
            'ModeSwitcher': 'Modus wechseln'
        }
    }
});

@Component({
imports: [
        FormsModule, ColorPickerModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <h4>Choose Color</h4>
               <ejs-input ejs-colorpicker type="color" id="element" locale="de-DE" /></div>`
})

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

Right-to-left (RTL)

The ColorPicker component supports right-to-left (RTL) rendering, improving the user experience and accessibility for languages written right-to-left (Arabic, Persian, Urdu, etc.). Set the enableRtl property to true to enable RTL mode.

The following example shows how to enable RTL support for the ColorPicker component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component } from '@angular/core';
import { L10n } from '@syncfusion/ej2-base';

L10n.load({
    'ar-AE': {
        'colorpicker': {
            'Apply': 'تطبيق',
            'Cancel': 'إلغاء',
            'ModeSwitcher': 'مفتاح كهربائي الوضع'
        }
    }
});

@Component({
imports: [
        FormsModule, ColorPickerModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <h4>Choose Color</h4>
               <ejs-input ejs-colorpicker type="color" id="element" [enableRtl]="true" locale="ar-AE" /></div>`
})

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

See Also