qontu / ngx-inline-editor

Native UI Inline-editor Angular (4.0+) component
https://qontu.github.io/ngx-inline-editor
MIT License
164 stars 90 forks source link

Enhancement Request: Allow arbitrary event binding to "save" and "cancel" button methods #47

Closed KeithGillette closed 7 years ago

KeithGillette commented 7 years ago

It would be great if the component API allowed access to the "save" and "cancel" button methods generically in such a way as we could bind arbitrary events to trigger them. For example:

<inline-editor 
  (keyup.enter)="onSubmit(value)"
  (keyup.esc)="cancel(value)"
  type="text" [(ngModel)]="editableText" (onSave)="saveEditable($event)" name="editableText1" 
  >
</inline-editor>
tonivj5 commented 7 years ago

Thanks! 👍

tonivj5 commented 7 years ago

@KeithGillette this feature will be added with #57. You will be able to do this:

<inline-editor #editor [(ngModel)]="title" type="text" [saveOnEnter]="true"></inline-editor>

or more complex/low level:

import { Component } from '@angular/core';
import { InlineEditorComponent, InlineEvent } from 'ng2-inline-editor';

@Component({
  selector: 'app-root',
  templateUrl: '<inline-editor #editor [(ngModel)]="title" type="text" (onEnter)="save($event, editor)"></inline-editor>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'hi';

  save(event: InlineEvent, editor: InlineEditorComponent) {
    // InlineEvent is a wrapper of {event: NativeEvent, state: State of input when it was saved}
    this.title = event.state.value;
    editor.saveAndClose({
      state: {
        value: this.title,
      }
    });
  }
}

👍

tonivj5 commented 7 years ago

This should be fixed in the last version (0.2.0-alpha.0). With the change of name, you should do an npm i @qontu/ngx-inline-editor and update your imports 👍