ngx-inline-edit

Angular Inline Edit

A directive for the inline-edit-js library

Installation

Install with NPM:

npm install ngx-inline-edit

Then, import the directive

import { InlineEditDirective } from 'ngx-inline-edit';

declarations: [
    ...
    InlineEditDirective,
    ...
]

Basic Usage

Set a property in your component

export class YourComponent {
 
    public editableString: string;
}

Then use that property with the inline edit directive

<div inlineEdit [(editable)]="editableString">
    {{ editableString }}
</div>

onChange Callback

You can also pass a callback to the onChange event

export class YourComponent {
 
    public editableString: string;
 
    ...
 
    public editableChangeCallback(newValue: string, oldValue: string, elementRef: ElementRef) {
        //  handle new value
    }
}

<div inlineEdit [(editable)]="editableString" [onChange]="editableChangeCallback">
    {{ editableString }}
</div>

Options

editable

Type: string

Your editable property

onChange

Type: Function Default: null

A callback that fires when the editable model changes, it passes back 3 parameters: newValue, oldValue, and a reference to the element.