How to get started with an Angular 8 in-place editor (quick editor)

AngularThe 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. In this knowledge base, we are going to provide details about how to easily integrate Syncfusion Angular In-place Editor in Angular 8 application and how to enable its commonly used features.

Prerequisites

Before start, we need following items to create Angular In-place Editor in Angular 8 application

• Node.js (latest version)
• Angular
• Angular CLI
• Visual studio code for editor.

Installation and application creation

• Install Angular cli 8 using following command.

  npm install -g @angular/cli@8.1.1
  

• Create an Angular 8 application using Angular cli.

        ng new angular8-app
        cd angular8-app
  

• Serve the Angular 8 application using following command

         ng serve
  

Listen the application in localhost:4200. Your application will serve in browser. Refer the below example screenshot for Angular 8 version.

Integration of Angular In-place Editor

• After running the Angular 8 application successfully, configure the Angular In-place Editor in this application. Install Angular In-place Editor and EJ2 package using following command. The --save command will instruct the NPM to include a inplace-editor package inside the dependencies section of the package.json.

             npm install @syncfusion/ej2-angular-inplace-editor  --save 
             npm install @syncfusion/ej2 --save 
  

• 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" [popupSettings]="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', {static: true})
     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><br>
      <ejs-inplaceeditor #dropdownEle mode="Inline" [model]="dropDownListModel" type="DropDownList" [value]='dropdownValue'></ejs-inplaceeditor><br>
       <ejs-inplaceeditor #comboBoxEle mode="Inline" [model]="comboBoxModel" type="ComboBox"   [value]='comboBoxValue'></ejs-inplaceeditor><br>
  <div>
  

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    @ViewChild('datePickerEle', {static: true})
    public datePickerObj: InPlaceEditorComponent;
   @ViewChild('dropdownEle', {static: true})
    public dropdownsObj: InPlaceEditorComponent;
    @ViewChild('comboBoxEle', {static: true})
    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.

Summary

​Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below.  You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!