Getting started with Angular Inplace editor component
11 Jul 202421 minutes to read
This section explains the steps to create a simple In-place Editor component and configure its available functionalities in Angular.
Getting Started with Angular CLI
The following section explains the steps required to create a simple angular-cli
application and how to configure In-place Editor
component.
Prerequisites
To get started with Syncfusion Angular UI Components, make sure that you have compatible versions of Angular and TypeScript.
- Angular : 6+
- TypeScript : 2.6+
Setting up an Angular project
Angular provides an easiest way to setup project using Angular CLI Angular CLI tool.
Install the CLI application globally in your machine.
npm install -g @angular/cli
Create a new application
ng new syncfusion-angular-app
Once you have executed the above command you may ask for following options,
- Would you like to add Angular routing?
- Which stylesheet format would you like to use?
By default it install the CSS style base application. To setup with SCSS, pass –style=SCSS argument on create project.
Example code snippet.
ng new syncfusion-angular-app --style=SCSS
Navigate to the created project folder.
cd syncfusion-angular-app
Installing Syncfusion In-place Editor package
Syncfusion packages are distributed in npm as @syncfusion
scoped packages. You can get all the Angular Syncfusion package from npm link.
Currently, Syncfusion provides two types of package structures for Angular components,
- Ivy library distribution package format
- Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.
Ivy library distribution package
Syncfusion Angular packages(>=20.2.36
) has been moved to the Ivy distribution to support the Angular Ivy rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.
Add @syncfusion/ej2-angular-inplace-editor
package to the application.
npm install @syncfusion/ej2-angular-inplace-editor --save
Angular compatibility compiled package(ngcc)
For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. To download the ngcc
package use the below.
Add @syncfusion/ej2-angular-inplace-editor@ngcc
package to the application.
npm install @syncfusion/ej2-angular-inplace-editor@ngcc --save
To mention the ngcc package in the package.json
file, add the suffix -ngcc
with the package version as below.
@syncfusion/ej2-angular-inplace-editor:"20.2.38-ngcc"
Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.
Adding In-place Editor component
Add the In-place Editor component snippet in app.component.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' };
}
Adding CSS reference
The following CSS files are available in ../node_modules/@syncfusion
package folder. This can be referenced in [src/styles.css] using following code.
@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';
The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components.
This web tool is useful to combine the required component scripts and styles in a single file.
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.component.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));