How to get started easily with Syncfusion Angular 11 Inplace Editor?
This article explains how to easily integrate Syncfusion Angular In-place Editor in an Angular 11 application and how to enable its commonly used features.The Essential JS 2 Angular In-place Editor is most useful for editing a value dynamically within its context (in-place). It has built-in support to handle all the form components, including TextBox, Dropdown List, DatePicker, and Rich Text Editor. In-place Editor Features inline, pop-up modes, and customizable user interface (UI) and events.
Prerequisites
Before start, we need following items to create Angular In-place Editor in an Angular 11 application.
- Node.js
- Angular 11
- Angular CLI
- Typescript 4+
- Visual Studio Code for Editor
Installation and application creation
- Install Angular cli 11 using following command.
npm install -g @angular/cli@11.2.3
Note:
If you would like to follow and run the application in Angular6 or Angular5 or Angular4, you need to replace the CLI command version number with the corresponding angular version number.
npm install -g @angular/cli@<CLI VERSION>
- Create an Angular 11 application using Angular cli.
ng new angular11-app cd angular11-app
- Serve the Angular 11 application using following command
ng serve --open
Listen the application in localhost:4200. Your application will serve in browser. Refer the below example screenshot for Angular 11 version.
Integration of Angular In-place Editor
- After running the Angular 11 application successfully, configure the Angular In-place Editor in this application. Install Angular In-place Editor and EJ2 package using following command.
npm install @syncfusion/ej2-angular-inplace-editor --save npm install @syncfusion/ej2 --save
The --save command will instruct the NPM to include a inplace-editor package inside the dependencies section of the package.json.
- Import In-place Editor from installed package in app/app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { InPlaceEditorModule } from '@syncfusion/ej2-angular-inplace-editor';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
InPlaceEditorModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
- You should refer the CSS file for Angular In-place Editor in style.css.
@import "../node_modules/@syncfusion/ej2/material.css";
- Add the Angular In-place Editor component in app.component.html.
<ejs-inplaceeditor></ejs-inplaceeditor >
- Now, render the In-place editor with Textbox as like below.
<div class=”control-section”> <ejs-inplaceeditor #inplace_editor mode="Inline" [popupSetting]="settings" [model]="overviewModel" type="Text" value='Andrew'></ejs-inplaceeditor> </div>
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
@ViewChild('inplace_editor')
public inplaceObj: InPlaceEditorComponent;
public overviewModel: object;
public settings: object;
ngOnInit(): void {
this.overviewModel = {
placeholder: 'Enter employee name'
};
this.settings = {
title: 'Enter Employee Name'
};
}
- Now serve the application using following command.
ng serve --open
Once all the files are compiled successfully. It will serve the site at localhost:4200
The following screenshot illustrates this:
Integrating other controls
- The
in-place editor can be rendered with built-in controls such as Datepicker, Dropdownlist, ComboBox and
more. These components features are editable in-place and can be
customized with the model properties. On clicking the dotted input element
it switches to the editable state.
<div class=”control-section”> <ejs-inplaceeditor #datePickerEle mode="Inline" [model]="datePickerModel" type="Date" [value]='dateValue'></ejs-inplaceeditor> <ejs-inplaceeditor #dropdownEle mode="Inline" [model]="dropDownListModel" type="DropDownList" [value]='dropdownValue'></ejs-inplaceeditor> <ejs-inplaceeditor #comboBoxEle mode="Inline" [model]="comboBoxModel" type="ComboBox" [value]='comboBoxValue'></ejs-inplaceeditor> <div>
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
@ViewChild('datePickerEle')
public datePickerObj: InPlaceEditorComponent;
@ViewChild('dropdownEle')
public dropdownsObj: InPlaceEditorComponent;
@ViewChild('comboBoxEle')
public comboBoxEleObj: InPlaceEditorComponent;
public datePickerModel: object;
public dropDownListModel: object;
public comboBoxModel: object;
public dateValue: Date = new Date();
public dropdownValue: string = 'Canada';
public comboBoxValue: string = 'Finland';
public datasourceData: string[] = ['Australia', 'Bermuda', 'Canada', 'Cameroon', 'Denmark', 'Finland', 'Greenland', 'Poland'];
ngOnInit(): void {
this.datePickerModel = {
placeholder: 'Select a date'
};
this.dropDownListModel = {
placeholder: 'Find a countries',
dataSource: this. datasourceData
};
this.comboBoxModel = {
placeholder: 'Find a countries',
dataSource: this. datasourceData
};
}
The following screenshot illustrates this:
Conclusion
We hope you enjoyed learning about how to get started easily with Syncfusion Angular 11 Inplace Editor.
You can refer to our Angular In-place Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Inplace Editor example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
