ngx-edit-inline

This is a very simple inline-edit component for Angular

View demo Changes

Installation

npm install ngx-edit-inline --save

Usage

1. Import NgxEditInlineModule

@NgModule({
    imports: [NgxEditInlineModule]
  })
  export class AppModule { }

2. Add edit-inline to component:

<ngx-edit-inline 
  [value]="person?.name"
  [type]="'text'"
  [saveOption]="'onedit'"
  [debounceTime]="500"
  [selectText]="true"
  [placeholder]="'enter name'"
  (onValueChanged)="changedValue($event)"></ngx-edit-inline>

3. API

• type: typ of the input
• value: initial value
• saveOption: onedit: emits changes while editing using debounceTime, focusout: only emits when the focus is set to another element
• placeholder: text shown when 'value' is empty
• selectText: if true it selects the current text onfocus
• onValueChanged(): emits new values