ng-draft-area

An angular textarea component which automatically saves a draft of user's input.

https://gitlab.com/michal.pta/draft-area.git
https://www.npmjs.com/package/ng-draft-area

Demo page

http://michal.pta.gitlab.io/draft-area/

How to use

1. Install package

npm install ng-draft-area --save

2. Import module

import { DraftAreaModule } from 'ng-draft-area';
 
@NgModule({ 
  ...
  imports: [ 
    ...
    DraftAreaModule
    ...
  ], 
  ...
})

3. Use in your template

<draft-area [(value)]="model" [key]="uniqueKey"></draft-area>

How it works

ng-draft-area works the same way as standard textarea.

The only difference happens behind the scenes. In the background it automatically saves every user's input in the localstorage of the user's browser (under the unique customizable key). In other words it creates a backup of what the user is entering into the textarea.

Then, whenever there's a difference between the value saved in the localstorage and the value passed to the value property, the component presents both versions on a single screen, and allows to easily compare / restore / discard the changes.

Properties