Inline editor in Angular

Inline Editing is a technology that allows you to select any editable element on the page and edit it in-place.

The inline-editor component for angular is used to create such UI elements which become editable whenever we click on it.

In this blog, we will see how to use ng2-inline-editor to achieve inline editing.


In order to work with this component we have to install the ng2-inline-editor. The recommended way to install is from npm manager i.e.,

npm i ng2-inline-editor --save

This component works for angular 2.0+ versions and also for angular 4 version.

After completion of installation we have to import this component in app module as shown below.

import {InlineEditorModule} from 'ng2-inline-editor';
imports: [

In the component html file, it can be used as shown in below example:

<inline-editor type="text" [(ngModel)]="editableText" 
(onSave)="saveEditable($event)" name="editableText1" size="8">

For the inline-editor type, we can use password, text and text-area.

In order to work with this, you have to include the Twitter Bootstrap and FontAwesome in your project which can be incorporated in the html head section of index.html.


<link rel="stylesheet" href="">

<link href="//" rel="stylesheet">

<link href="//" rel="stylesheet">


This inline-edit component works by saving the edited data in local storage whenever you click save.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s