HelpBot Assistant

How can I help you?

Getting started with Angular Inplace editor component

10 Feb 202623 minutes to read

This section explains the steps to create a simple In-place Editor component and configure its available functionalities in Angular.

Note: This guide supports Angular 21 and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the Angular version support matrix. Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.

Ready to streamline your Syncfusion® Angular development? Discover the full potential of Syncfusion® Angular components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. Explore Syncfusion® AI Coding Assistant

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion Angular UI Components.

SetUp the Angular application

A straightforward approach to beginning with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Installing a specific version

To install a particular version of Angular CLI, use:

npm install -g @angular/[email protected]

Create a new application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app
  • This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]
  • By default, a CSS-based application is created. Use SCSS if required:
ng new syncfusion-angular-app --style=scss
  • During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Initial_setup

  • Select the required AI tool or ‘none’ if you do not need any AI tool.

Initial_setup

  • Navigate to your newly created application directory:
cd syncfusion-angular-app

Note: In Angular 19 and below, it uses app.component.ts, app.component.html, app.component.css etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Installing Syncfusion® In-place Editor package

Syncfusion®’s Angular component packages are available on npmjs.com. To use Syncfusion® Angular components, install the necessary package.

This guide uses the Angular In-place Editor component for demonstration. Add the Angular In-place Editor component component with:

ng add @syncfusion/ej2-angular-inplace-editor

This command will perform the following configurations:

  • Add the @syncfusion/ej2-angular-inplace-editor package and peer dependencies to your package.json.
  • Import the In-place Editor component component in your application.
  • Register the default Syncfusion® material theme in angular.json.

For more details on version compatibility, refer to the Version Compatibility section.

Syncfusion® offers two package structures for Angular components:

  1. Ivy library distribution package format
  2. Angular compatibility compiler (ngcc), which is Angular’s legacy compilation pipeline.
    Syncfusion®’s latest Angular packages are provided as Ivy-compatible and suited for Angular 12 and above. To install the package, execute: 
    ng add @syncfusion/ej2-angular-inplace-editor

    For applications not compiled with Ivy, use the ngcc tagged packages:

    The ngcc packages are still compatible with Angular CLI versions 15 and below. However, they may generate warnings suggesting the use of IVY compiled packages. Starting from Angular 16, support for the ngcc package has been completely removed. If you have further questions regarding ngcc compatibility, please refer to the following FAQ.

    npm add @syncfusion/[email protected]

Adding CSS reference

Syncfusion® Angular component themes can be added in various ways: via CSS or SCSS styles from npm packages, CDN, CRG, or Theme Studio.

The Material theme is added to your styles.css when you run ng add (this happens automatically by default).

To stylize only specific Syncfusion® components, import the necessary styles. For example, to style only the In-place Editor component:

      @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
      @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
      @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
      @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
      @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
      @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
      @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
      @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
      @import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css';
      @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
      @import '../node_modules/@syncfusion/ej2-angular-inplace-editor/styles/material.css';

Ensure that the import order aligns with the component’s dependency sequence.

For using SCSS styles, refer to this guide.

Adding In-place Editor component

Add the In-place Editor component snippet in app.ts as follows.

import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor'
import { Component } from '@angular/core';

@Component({
imports: [
         InPlaceEditorAllModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-inplaceeditor id="element" type="Text" value="Andrew" [model]="modelObj"></ejs-inplaceeditor>`
})

export class AppComponent {
  public modelObj: Object = { placeholder: 'Enter employee name' };
}

Running the application

Run the ng serve command in command window, it will serve your application and you can open the browser window. Output will appear as follows.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor'




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

@Component({
imports: [
         InPlaceEditorAllModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div id='container'>
    <div class="control-group">
        <div class="e-heading">
        <h3> Modify Basic Details </h3>
        </div>
        <table>
            <tr>
                <td>Name</td>
                <td class='left'>
                    <ejs-inplaceeditor id="element" mode="Inline" value="Andrew" [model]="elementModel"></ejs-inplaceeditor>
                </td>
            </tr>
            <tr>
                <td>Date of Birth</td>
                <td class='left'>
                    <ejs-inplaceeditor id="dateofbirth" type="Date" mode="Inline" [value]="dateValue" [model]="dateModel"></ejs-inplaceeditor>
                </td>
            </tr>
            <tr>
                <td>Gender</td>
                <td class='left'>
                    <ejs-inplaceeditor id="gender" type="DropDownList" mode="Inline" value="Male" [model]="genderModel"></ejs-inplaceeditor>
                </td>
            </tr>
        </table>
        </div>
        </div>`
})

export class AppComponent {
  public genderData: string[] = ['Male', 'Female'];
  public dateModel: Object = { showTodayButton: true, placeholder: 'Select date of birth' };
  public dateValue: Date = new Date('04/12/2018');
  public elementModel: Object = { placeholder: 'Enter your name' };
  public genderModel: Object = {  dataSource: this.genderData, placeholder: 'Select gender' };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Add the In-place Editor with Textbox

By default, the Essential® JS2 TextBox component is rendered in In-place Editor with type property sets as Text.

Modify the template in src/app/app.ts file to render the ej2-angular-inplace-editor component.

import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor'
import { Component } from '@angular/core';

@Component({
imports: [
         InPlaceEditorAllModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-inplaceeditor id="element" type="Text" value="Andrew" [model]="modelObj"></ejs-inplaceeditor>`
})

export class AppComponent {
    public modelObj: Object = { placeholder: 'Enter employee name' };
}

Configuring DropDownList

You can render the Essential® JS2 DropDownList by changing the type property as DropDownList and configure its properties and methods using the model property.

In the following sample, type and model values are configured to render the DropDownList component.

import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor'
import { Component } from '@angular/core';

@Component({
imports: [
         InPlaceEditorAllModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-inplaceeditor id="element" type="DropDownList" mode="Inline" [model]="modelObj"></ejs-inplaceeditor>`
})

export class AppComponent {
    public genderData : string[] = ['Male', 'Female'];
    public modelObj: Object = { placeholder: 'Select gender', dataSource: this.genderData };
}

Integrate DatePicker

You can render the Essential® JS2 DatePicker by changing the type property as Date and also configure its properties and methods using the model property.

import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor'
import { Component } from '@angular/core';

@Component({
imports: [
         InPlaceEditorAllModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-inplaceeditor id="element" type="Date" [value]="value" [model]="modelObj"></ejs-inplaceeditor>`
})

export class AppComponent {
    public modelObj: Object = { showTodayButton: true };
    public value: Date = new Date('04/12/2018');
}

Once you have configured Textbox, DatePicker and DropDownList you will get following output as shown in below,

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor'




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

@Component({
imports: [
         InPlaceEditorAllModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div id='container'>
    <div class="control-group">
            <div class="e-heading">
            <h3> Modify Basic Details </h3>
            </div>
            <table>
                <tr>
                    <td>Name</td>
                    <td class='left'>
                        <ejs-inplaceeditor id="element" mode="Inline" value="Andrew" [model]="elementModel"></ejs-inplaceeditor>
                    </td>
                </tr>
                <tr>
                    <td>Date of Birth</td>
                    <td class='left'>
                        <ejs-inplaceeditor id="dateofbirth" type="Date" mode="Inline" [value]="dateValue" [model]="dateModel"></ejs-inplaceeditor>
                    </td>
                </tr>
                <tr>
                    <td>Gender</td>
                    <td class='left'>
                        <ejs-inplaceeditor id="gender" type="DropDownList" mode="Inline" value="Male" [model]="genderModel"></ejs-inplaceeditor>
                    </td>
                </tr>
            </table>
        </div>
        </div>
               `
})

export class AppComponent {
  public genderData: string[] = ['Male', 'Female'];
  public dateModel: Object = { showTodayButton: true, placeholder: 'Select date of birth' };
  public dateValue: Date = new Date('04/12/2018');
  public elementModel: Object = { placeholder: 'Enter your name' };
  public genderModel: Object = {  dataSource: this.genderData, placeholder: 'Select gender' };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Two-way binding

In In-place Editor, the value property supports two-way binding functionality. The following example demonstrates how to achieve two-way binding, by using property binding to bind the value to the first In-place Editor component and ngModel to bind the model data to the second In-place Editor. The value of the In-place Editor will get changed, when there is any change in the property value or model value.

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor'




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

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


standalone: true,
    selector: 'app-root',
    template: `<div id='container'>
    <div class="control-group">
    <table>
        <tr>
            <td><b>TextBox :</b></td>
            <td><ejs-inplaceeditor id="texteditor1" type="Text" mode="Inline" [(value)]="value" [model]="modelObj"></ejs-inplaceeditor></td>
            <td><ejs-inplaceeditor id="texteditor2" type="Text" mode="Inline" [(ngModel)]="value" [model]="modelObj"></ejs-inplaceeditor></td>
        </tr>
        <tr>
            <td><b>Datepicker :</b></td>
            <td><ejs-inplaceeditor id="dateeditor1" type="Date" mode="Inline" [(value)]="dateValue" [model]="dateModel"></ejs-inplaceeditor></td>
            <td><ejs-inplaceeditor id="dateeditor2" type="Date" mode="Inline" [(ngModel)]="dateValue" [model]="dateModel"></ejs-inplaceeditor></td>
        </tr>
        <tr>
            <td><b>DropDownList :</b></td>
            <td><ejs-inplaceeditor id="dropDowneditor1" type="DropDownList" mode="Inline" [(value)]="dropdownValue" [model]="dropDownmodelObj"></ejs-inplaceeditor></td>
            <td><ejs-inplaceeditor id="dropDowneditor2" type="DropDownList" mode="Inline" [(ngModel)]="dropdownValue" [model]="dropDownmodelObj"></ejs-inplaceeditor></td>
        </tr>
    </table>
</div>
</div>`
})

export class AppComponent {
  public value: string = 'Andrew';
  public modelObj: Object = { placeholder: 'Enter employee name' };
  public dateModel: Object = { showTodayButton: true, placeholder: 'Select date of birth' };
  public dateValue: Date = new Date('04/12/2018');
  public dropdownValue: string = 'Android';
  public frameWorkList : string[] = ['Android', 'JavaScript', 'jQuery', 'TypeScript', 'Angular', 'React', 'Vue','Ionic'];
  public dropDownmodelObj: Object = { placeholder: 'Select frameWorks', dataSource: this.frameWorkList };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Submitting data to the server (save)

You can submit editor value to the server by configuring the url, adaptor and primaryKey property.

Property Usage
url Gets the URL for server submit action.
adaptor Specifies the adaptor type that is used by DataManager to communicate with DataSource.
primaryKey Defines the unique primary key of editable field which can be used for saving data in the data-base.

The primaryKey property is mandatory. If it’s not set, edited data are not sent to the server.

Refresh with modified value

The edited data is submitted to the server and you can see the new values getting reflected in the In-place Editor.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor'




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

@Component({
imports: [
         InPlaceEditorAllModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
    <div id='container'>
        <div className='control-group' style="text-align: center; margin: 100px auto;">
            Best Employee of the year: <ejs-inplaceeditor id="element" type="DropDownList" mode="Inline" value="Andrew Fuller" name='Employee' [url]="url" primaryKey="Employee" adaptor="UrlAdaptor" [model]="model" (actionSuccess)='actionSuccess($event)'></ejs-inplaceeditor>
          </div>
         <table style='margin:auto;width:50%'>
        <tr>
            <td style="text-align: left">
               Old Value :
            </td>
            <td id="oldValue" style="text-align: left">
            </td>
        </tr>
        <tr>
            <td style="text-align: left">
               New Value :
            </td>
            <td id="newValue" style="text-align: left">
                Andrew Fuller
            </td>
        </tr>
       </table>
     </div>
    `
})

export class AppComponent {
  public frameWorkList: string[] = ['Andrew Fuller', 'Janet Leverling', 'Laura Callahan', 'TypeScript', 'Margaret Hamilt', 'Michael Suyama', 'Nancy Davloio', 'Robert King'];
  public model: Object = {  dataSource: this.frameWorkList, placeholder: 'Select employee',  popupHeight: '200px' };
  public url: String = "https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData";
  public actionSuccess(e: any): void {
      let newEle: HTMLElement = document.getElementById('newValue') as HTMLElement;
      let oldEle: HTMLElement = document.getElementById('oldValue') as HTMLElement;
      oldEle.textContent = newEle.textContent;
      newEle.textContent = e.value;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also