This section explains the steps to create a simple In-place Editor component and configure its available functionalities in Angular.
The following section explains the steps required to create a simple angular-cli
application and how to configure In-place Editor
component.
To get started with Syncfusion Angular UI Components, make sure that you have compatible versions of Angular and TypeScript.
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
ng new syncfusion-angular-app
Once you have executed the above command you may ask for following options,
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
Syncfusion packages are distributed in npm as @syncfusion
scoped packages. You can get all the Angular Syncfusion package from npm link.
Add Syncfusion Angular In-place Editor package in your application by using following Command,
npm install @syncfusion/ej2-angular-inplace-editor --save
(or)
npm i @syncfusion/ej2-angular-inplace-editor --save
Once you have successfully installed the package, the component modules are ready to configure in your application from the installed location. Syncfusion Angular package provides two different types of ngModules.
Refer to Ng-Module to learn about ngModules
.
Refer the following snippet to import the InPlaceEditorAllModule
in app.module.ts
from the @syncfusion/ej2-angular-inplace-editor
.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// Imported syncfusion InPlaceEditorAllModule from ej2-angular-inplace-editor package
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
// Registering EJ2 In-place Editor Module
InPlaceEditorAllModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Add the In-place Editor component snippet in app.component.ts
as follows.
import { Component } from '@angular/core';
@Component({
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' };
}
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.
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 { Component } from '@angular/core';
@Component({
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 { 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/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 .control-group {
margin-top: 50px;
}
#container .control-group table {
margin:auto;
}
#container .e-heading {
text-align: center;
}
#container .control-group table td {
height: 70px;
width: 150px;
}
#container .control-group table td {
text-align: left;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
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 { Component } from '@angular/core';
@Component({
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' };
}
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 { Component } from '@angular/core';
@Component({
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 };
}
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 { Component } from '@angular/core';
@Component({
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 { Component } from '@angular/core';
@Component({
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 { 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/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 .control-group {
margin-top: 50px;
}
#container .control-group table {
margin:auto;
}
#container .e-heading {
text-align: center;
}
#container .control-group table td {
height: 70px;
width: 150px;
}
#container .control-group table td {
text-align: left;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
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.
The edited data is submitted to the server and you can see the new values getting reflected in the In-place Editor.
import { Component } from '@angular/core';
@Component({
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');
let oldEle: HTMLElement = document.getElementById('oldValue');
oldEle.textContent = newEle.textContent;
newEle.textContent = e.value;
}
}
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/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>
.e-inplaceeditor {
text-align: left
}
#container .control-group {
text-align: center;
margin: 100px auto;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}