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.

USING NG2-INLINE-EDITOR

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';
@NgModule({
imports: [
InlineEditorModule
]
})

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">
</inline-editor>

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.

<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

</head>

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

w

Connecting to %s