ngx-input-eip v0.1.2

Input edit in place

# Summary

Lightweight edit in place text editor.

Example

Example project here

git clone https://gitlab.opinioni.net/angular-components/ngx-input-eip-example.git

Getting started

1. Install the library using npm

npm i --save ngx-input-eip

2. Import the module to yourmodule.module.ts

import { NgxInputEipModule } from 'ngx-input-eip';

3. Add the module to the imports

@NgModule({
  declarations: [
    MyComponentPage
  ],
  imports: [
    CommonModule,
    NgxInputEipModule // Adding the module import here
  ]
})
export class MyComponentModule { }

4. Start using the library

<!-- Mandatory short field -->
<ngx-input-eip [isMandatory]="true" [(ngModel)]="user.fullname" ></ngx-input-eip>

<!-- Non-mandatory long field. -->
<ngx-input-eip [isShort]="false" [(ngModel)]="user.funnyStory" ></ngx-input-eip>

Api

Inputs

Outpus

Most of the common events from the html element will be trasmitted. | Output | Type | Description | | ------ | ---- | ----------- | | (onSubmit) | {value: string, valid: boolean, errors: any} | This event will be emitted when the input is submitted. WARNING: This event will not be emitted if [autosave]="true" | | (onCancel) | void | Emitted when the changes are cancelled (click on "deny/cancel" button). WARNING: this event will not be emitted if [autosave]="true" | | (areUnsavedChanges) | boolean | Is there any changes that hasnt been emitted to parent? Useful to block user from leaving the page if there are any unsaved changes. | | (onChange) | any | Event emitted by the input. | | (onInput) | any | Event emitted by the input. | | (onClick) | any | Event emitted by the input. | | (onFocus) | any | Event emitted by the input. | | (onKeyDown) | any | Event emitted by the input. | | (onResize) | any | Event emitted by the input. | | (onDblclick) | any | Event emitted by the input. | | (onBlur) | any | Event emitted by the input. | | (onKeyPress) | any | Event emitted by the input. | | (onKeyUp) | any | Event emitted by the input. |

Html params

Params that you can use to edit the dom.

<ngx-input-eip>
  <span label >Label for the input</span>

  <button submitButton i18n >Conferma</button>
  <button cancelButton i18n >Annulla</button>
</ngx-input-eip>

Public properties

Public properties that can be useful; You can call any of this on the component. | Method | Description | | ------ | ----------- | | get debugJson(): any | This getter will return a hash of information. Cool if you want to see exactly what is going on inside the component. | | submit(): void | Function called when the submit button is clicked. | | cancel(): void | Function called when the cancel button is clicked. | | input?: ElementRef; | The actual input where user can write. WARNING: this is a <textarea>, not an <input>. | | get allErrorsMessages(): (string \| TemplateRef<any>)[] | Get all the error messages. |

Examples

All the examples below skip the initial setup 1. Simple short input

<ngx-input-eip [(ngModel)]="myValue" ></ngx-input-eip>

2. Textarea edit-in-place

<!-- [short]="false" -->
<ngx-input-eip [short]="false" [(ngModel)]="myValue"></ngx-input-eip>

3. Numerical input

<ngx-input-eip formControlName="myValue" [numerical]="true" [min]="0" [max]="100" ></ngx-input-eip>

4. With custom html label and/or buttons

<ngx-input-eip formControlName="myValue">
  <app-my-label [for]="'myValue'" label ></app-my-label>

  <button submitButton i18n >Conferma</button>
  <button cancelButton i18n >Annulla</button>
</ngx-input-eip>

5. Calling public properties

<ngx-input-eip #input formControlName="myValue"></ngx-input-eip>

<hr>

<pre [innerText]="input.debugJson | json" ></pre>

Next features

• On numerical input, +1 if arrow up and -1 if arrow down.
• On numerical input, do not allow text input. (delete everything except the numbers)
• On numerical input, add input [step] to define how much should the value be shifted with the arrows (down/up).
• On numerical input, allow negative and decimal numbers.
• Labels: TemplateRef can be passed too, not only strings.