How To Use Syncfusion In-place Editor In Angular Application

Introduction

In this article, we will learn how to add In-place Editor in the Angular application. In-Place Editor component is used to edit a value within its context (in-place).

Prerequisites

Basic Knowledge of Angular 2 or higher
Visual Studio Code
Node and NPM installed
Bootstrap

Create an Angular Project

Create an Angular project by using the following command,

ng new synDemo

Open this project in Visual Studio Code install the following Libraries, To install, use the following command,

npm install @syncfusion/ej2-angular-inplace-editor
npm install @syncfusion/ej2-angular-buttons
npm install @syncfusion/ej2-angular-dropdowns

Now install Bootstrap by using the following command,

npm install bootstrap --save

Now open the styles.css file and add Bootstrap file reference. To add a reference in the styles.css file add this line.

@import '~bootstrap/dist/css/bootstrap.min.css';

Now open app.module.ts file, add the following code to this file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { InPlaceEditorModule } from '@syncfusion/ej2-angular-inplace-editor';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,FormsModule,
    ReactiveFormsModule,CheckBoxModule,
    InPlaceEditorModule, DropDownListModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now create a new component by using the following command,

ng g c home

Now open home.component.html file and add the following code,

 <div class="container" style="margin-top:10px;margin-bottom: 24px;">    
  <div class="col-sm-12 btn btn-info">    
    How To Use Syncfusion In-place Editor In Angular Application 
  </div>    
</div>
<div class="col-lg-8 control-section inplace-control-section input-layout container">
    <div class="control_wrapper">
        <table>
            <tr>
                <td>
                    <label class="control-label" style="text-align: left;font-size: 14px;font-weight: 400">
                        User Name </label>
                </td>
                <td>
                    <ejs-inplaceeditor #inplace_editor mode="Inline" [popupSettings]="settings" [model]="overviewModel"
                        type="Text" [(ngModel)]="username"></ejs-inplaceeditor>
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label" style="text-align: left;font-size: 14px;font-weight: 400">
                        City </label>
                </td>
                <td>
                    <ejs-inplaceeditor #inplace_editor mode="Inline" [popupSettings]="settings" [model]="overviewModel"
                        type="Text" [(ngModel)]="city"></ejs-inplaceeditor>
                </td>
            </tr>
        </table>
    </div>
</div>

Now open home.component.ts file and add the following code,

import { Component, OnInit, ViewChild } from '@angular/core';
import { InPlaceEditorComponent } from '@syncfusion/ej2-angular-inplace-editor';
import { NumericTextBoxModel, MaskedTextBoxModel, TextBoxModel } from '@syncfusion/ej2-inputs';
import { PopupSettingsModel } from '@syncfusion/ej2-inplace-editor/src/inplace-editor/base/models-model';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
    username:any="Sanwar"
    city:any="Bangalore"
@ViewChild('inplace_editor')
    public inplaceObj: InPlaceEditorComponent;
  
    @ViewChild('numericTextBoxEle')
    public numericTextBoxObj: InPlaceEditorComponent;
  
    @ViewChild('maskedTextBoxEle')
    public maskedTextBoxObj: InPlaceEditorComponent;
  
    public date: Date = new Date();

    public overviewModel: TextBoxModel = {
      placeholder: 'Enter User name'
    };
    public settings: PopupSettingsModel = {
      title: 'Enter User Name'
    };

 constructor(){
 
 }
  ngOnInit(): void {
  }
}

Now open app.component.html file and add the following code,

<app-home></app-home>

Now run the application using npm start and check the result.

Enter some values and click on the button

We also use dropdown in in-place dropdown, add the following code in home.component.html

 <div class="container" style="margin-top:10px;margin-bottom: 24px;">    
  <div class="col-sm-12 btn btn-info">    
    How To Use Syncfusion In-place Editor In Angular Application 
  </div>    
</div>
<div class="col-lg-8 control-section inplace-control-section drop-down-layout container">
    <div class="control_wrapper">
        <table>
            <tr>
                <td>
                    <label class="control-label">
                       Select a Country</label>
                </td>
                <td>
                    <ejs-inplaceeditor #countrydropdown mode="Inline" [model]="dropDownListModel" type="DropDownList" [value]='dropdownValue'></ejs-inplaceeditor>
                </td>
            </tr>
          
        </table>
    </div>
</div>

Now open app.component.ts file and add the following code,

import { Component, OnInit, ViewChild } from '@angular/core';
import { InPlaceEditorComponent } from '@syncfusion/ej2-angular-inplace-editor';
import {  DropDownListModel } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

@ViewChild('countrydropdown')
public dropdownsObj: InPlaceEditorComponent;
public dropdownValue: string = 'India';
public Data: string[] = ['India','Australia', 'Canada', 'Cameroon', 'Denmark', 'England', 'Poland'];
public dropDownListModel: DropDownListModel = {
      placeholder: 'Select a country',
      dataSource: this.Data
  };
 constructor(){

 }
  ngOnInit(): void {
  }
}import { Component, OnInit, ViewChild } from '@angular/core';
import { InPlaceEditorComponent } from '@syncfusion/ej2-angular-inplace-editor';
import {  DropDownListModel } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

@ViewChild('countrydropdown')
public dropdownsObj: InPlaceEditorComponent;
public dropdownValue: string = 'India';
public Data: string[] = ['India','Australia', 'Canada', 'Cameroon', 'Denmark', 'England', 'Poland'];
public dropDownListModel: DropDownListModel = {
      placeholder: 'Select a country',
      dataSource: this.Data
  };
 constructor(){

 }
  ngOnInit(): void {
  }
}

Now run the application using npm start and check the result.

Summary

In this article, we learned how to add In-place Editor in the Angular application.