# ngx-signaturepad2

> Angular8 wrapper for szimek / signature_pad

Latest version **1.0.2** (published 2020-02-29) · 0 weekly downloads

## Install

```sh
npm install ngx-signaturepad2
pnpm add ngx-signaturepad2
yarn add ngx-signaturepad2
bun add ngx-signaturepad2
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2020-02-29 |
| First published | 2020-02-29 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 66.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Jeremy Jacob |
| Maintainers | jeremyj11 |
| Keywords | signature_pad, signature pad, ngx-signaturepad, Angular |

## Links

- npm: https://www.npmjs.com/package/ngx-signaturepad2
- Repository: https://github.com/jeremyj11/ngx-signaturepad2
- Homepage: https://github.com/jeremyj11/ngx-signaturepad2#readme
- Issues: https://github.com/jeremyj11/ngx-signaturepad2/issues
- npm.io page: https://npm.io/package/ngx-signaturepad2

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [signature_pad](https://npm.io/package/signature_pad.md) ^3.0.0-beta.3

## Recent versions

- 1.0.2 (latest) — 2020-02-29
- 1.0.1 — 2020-02-29
- 1.0.0 — 2020-02-29

## README

# NgxSignaturepad2Demo

Angular 8 component for [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).

## Install
`npm install ngx-signaturepad2 --save`

## Reference Implementation
* [Source](https://github.com/jeremyj11/ngx-signaturepad2/)

## Usage example

API is identical to [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).

Inputs:
options are as per [szimek/signature_pad](https://www.npmjs.com/package/signature_pad)
width: width of the canvas (px)
height: height of the canvas (px)

```typescript

// import into app module

import { NgxSignaturepadModule } from 'ngx-signaturepad2';

...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxSignaturepadModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

// then import for use in a component

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  @ViewChild('signaturePad', { static: false }) signaturePad;

  width: number = 600;
  height: number = 300;
  options: any = null;

  constructor() { }

  isEmpty() {
    console.log('is empty', this.signaturePad.isEmpty());
  }

  savePng() {
    const data = this.signaturePad.toDataURL();
    console.log(data);
  }

  saveJpg() {
    const data = this.signaturePad.toDataURL("image/jpeg");
    console.log(data);
  }

  saveSvg() {
    const data = this.signaturePad.toDataURL("image/svg+xml");
    console.log(data);
  }

  saveArray() {
    const data = this.signaturePad.toData();
    console.log(data);
    console.log(JSON.stringify(data));
  }

  clear() {
    console.log('clear');
    this.signaturePad.clear();
  }

  changeOptions() {
    console.log('options changed');
    this.options = {
      minWidth: 5,
      maxWidth: 10,
      penColor: "rgb(66, 133, 244)"
    };
  }

  setSigArray() {
    let jsonString = '[{"color":"rgb(66, 133, 244)","points":[{"time":1582940095394,"x":267,"y":116}]},{"color":"rgb(66, 133, 244)","points":[{"time":1582940096537,"x":297,"y":115}]},{"color":"rgb(66, 133, 244)","points":[{"time":1582940097774,"x":239,"y":135},{"time":1582940097853,"x":240,"y":141},{"time":1582940097885,"x":242,"y":148},{"time":1582940097918,"x":244,"y":153},{"time":1582940097983,"x":248,"y":158},{"time":1582940098033,"x":252,"y":162},{"time":1582940098064,"x":257,"y":165},{"time":1582940098112,"x":264,"y":167},{"time":1582940098144,"x":271,"y":167},{"time":1582940098177,"x":284,"y":168},{"time":1582940098210,"x":295,"y":168},{"time":1582940098244,"x":302,"y":165},{"time":1582940098277,"x":309,"y":161},{"time":1582940098311,"x":315,"y":156},{"time":1582940098343,"x":322,"y":148},{"time":1582940098376,"x":325,"y":142},{"time":1582940098392,"x":330,"y":136},{"time":1582940098442,"x":333,"y":131}]}]';
    this.signaturePad.fromData(JSON.parse(jsonString));
  }

  //
  setSigString() {
    this.signaturePad.fromDataURL("data:image/png;base64,iVBORw...");
  }
}

```

---
_Source: https://npm.io/package/ngx-signaturepad2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._