edit-on-click v0.0.3

Angular EditOnClick

在点击文本时变为输入框，配合 NG-ZORRO

Demo

安装

npm install edit-on-click --save

import { EditOnClickModule } from 'edit-on-click';

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

如何使用

基本用法

<p [(editOnClick)]="text">{{text}}</p>

text = 'Click me!';

使用配置项

指定输入框类型为 number

<p [(editOnClick)]="count" [editOnClickConfig]="{type:'number'}">{{count}}</p>

count = 10;

指定输入框类型为 select

<p [(editOnClick)]="name" [editOnClickConfig]="selectConfig">{{name}}</p>

name = '小笼包';
selectConfig: EditOnClickConfig = {
  type: 'select',
  selectOptions: [
    { label: '小笼包', value: '小笼包' },
    { label: '小龙虾', value: '小龙虾' },
    { label: '生煎', value: '生煎' },
    { label: '馄饨', value: '馄饨' },
  ]
};

API

EditOnClickConfig