Globalization in Angular In-place Editor component

18 May 2022 / 3 minutes to read

Localization

Localization library allows you to localize the default text content of the In-place Editor to different cultures using the locale property. In-place Editor following keys will be localize based on culture.

Locale key	en-US (default)
save	Close
cancel	Cancel
loadingText	Loading…
editIcon	Click to edit
editAreaClick	Click to edit
editAreaDoubleClick	Double click to edit

To load translation object in an application use load function of L10n class. In the following sample, French culture is set to In-place Editor and change the tooltip text.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.html

index.css

import { Component, OnInit, ViewChild } from '@angular/core';
import { InPlaceEditorComponent, EditableType } from '@syncfusion/ej2-angular-inplace-editor';
import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
import { L10n } from '@syncfusion/ej2-base';

@Component({
    selector: 'app-root',
    template: `
    <div id='container'>
    <table class="table-section">
        <tr>
            <td> EditableOn: </td>
            <td>
                <ejs-dropdownlist #dropDown (change)="onChange($event)" id='dropDown' width="auto" [dataSource]='editableOnData' value='Click' placeholder="Select edit type">
                </ejs-dropdownlist>
            </td>
        </tr>
        <tr>
            <td  class="sample-td"> Enter your name: </td>
            <td  class="sample-td">
                <ejs-inplaceeditor #element id="element" mode="Inline" value="Andrew" locale="fr-BE" [model]="model"></ejs-inplaceeditor>
            </td>
        </tr>
    </table>
</div>
    `
})

export class AppComponent implements OnInit {
  @ViewChild('element') editObj: InPlaceEditorComponent;
  public model: object = { placeholder: 'Enter some text' };
  public editableOnData: string[] = ['Click', 'DblClick', 'EditIconClick'];
  public onChange(e: ChangeEventArgs): void {
    let editType: EditableType = e.itemData.value as EditableType;
    this.editObj.editableOn = editType;
    this.editObj.dataBind();
  }
  ngOnInit(): void {
    L10n.load({
      'fr-BE': {
          'inplace-editor': {
              'save': 'enregistrer',
              'cancel': 'Annuler',
              'loadingText': 'Chargement...',
              'editIcon': 'Cliquez pour éditer',
              'editAreaClick': 'Cliquez pour éditer',
              'editAreaDoubleClick': 'Double-cliquez pour éditer'
          }
      }
    });
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor';
import { DropDownListAllModule  } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, InPlaceEditorAllModule, DropDownListAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 InPlace Editor Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript InPlace Editor Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />

    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <app-root>
        <div id='loader'>LOADING....</div>
    </app-root>
</body>
</html>

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.table-section {
    margin: 0 auto;
}

tr td:first-child {
    text-align: right;
    padding-right: 20px;
}

.sample-td {
    padding-top: 10px;
    min-width: 230px;
    height: 100px;
}

Right to left

Specifies the direction of the In-place Editor component using the enableRtl property. For writing systems that require it like Arabic, Hebrew, etc., the direction can be switched to right-to-left.

It will not change based on the locale property.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.html

index.css

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <div id='container'>
            <span class="content-title"> Enter your name: </span>
            <ejs-inplaceeditor #element id="element" mode="Inline" value="Andrew" enableRtl=true></ejs-inplaceeditor>
        </div>
    `
})

export class AppComponent {
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, InPlaceEditorAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 InPlace Editor Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript InPlace Editor Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />

    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <app-root>
        <div id='loader'>LOADING....</div>
    </app-root>
</body>
</html>

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#element {
    width: 150px;
}

.content-title {
    font-weight: 500;
    margin-right: 20px;
    display: flex;
    align-items: center;
}

Format

Formatting is a way of representing the value in different format. You can format the following mentioned components with its format property, when it passed through the In-place Editor model property.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.html

index.css

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
    <div id='container'>
        <span class="content-title"> Select date: </span>
        <ejs-inplaceeditor #element id="element" type="Date" [model]="model" [value]="value"></ejs-inplaceeditor>
    </div>
`
})

export class AppComponent {
public model: object = { placeholder: 'Select date', format: 'yyyy-MM-dd' };
public value: Date = new Date('11/23/2018');
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, InPlaceEditorAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 InPlace Editor Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript InPlace Editor Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />

    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <app-root>
        <div id='loader'>LOADING....</div>
    </app-root>
</body>
</html>

#container {
    display: flex;
    justify-content: center;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.content-title {
    font-weight: 500;
    margin-right: 20px;
    display: flex;
    align-items: center;
}

Contents

Localization
Right to left
Format

Contents

Localization
Right to left
Format