angular-ngx-inline-edit

Angular-Inline-Edit

angular-ngx-inline-edit is a library of Angular that allows you to create editable elements. Such technique is also known as click-to-edit or edit-in-place.

Table of contents

• Getting started
• Usage
• Derivates Table
• Output Events

Getting started

Step 1: Install angular-ngx-inline-edit:

NPM

npm i angular-ngx-inline-edit

Step 2: Import the InlineEditModule:

import {InlineEditModule} from 'angular-ngx-inline-edit';

@NgModule({
  declarations: [AppComponent],
  imports: [InlineEditModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Usage

<div *ngFor="let entity of entities; let index = index" style="display: block;">
	<ngx-inline-edit (onStateChange)="updateField(entity.name)">
		<ng-template view>
			{{entity.name}}
		</ng-template>
		<ng-template edit>
			<input type="text" [formControl]="userName" focusable editable>
		</ng-template>
	</ngx-inline-edit>

	<ngx-inline-edit (onStateChange)="updateField(entity.isAdmin)">
		<ng-template view>{{entity.isAdmin}}</ng-template>
		<ng-template edit>
			<input type="checkbox" [formControl]="userType">&nbsp;{{entity.isAdmin}}
		</ng-template>
	</ngx-inline-edit>
</div>

Derivates Table

Derivative Name	Description
focusable	It makes the input field to be focusable.
editable	It registers an event listener, which calls the component’s method whenever the user clicks ‘enter’ to change its state from edit to view.
view	It is responsible for exposing a reference to their TemplateRef (For View).
edit	It is responsible for exposing a reference to their TemplateRef (For Edit).

Output Events

Currently Only one event is emitted which is onStateChange. This is emitted when we switch back to view mode from edit mode using this we can check whether new value is equal to old value or use it for any other purpose.

Author

• [Sam Arora]

License

MIT