@eve-sama/ngx-signature-pad

English | 简体中文

Introduction

A handwritten signature plugin suitable for Angular ecology, suppprt V15.

Demo

You can see all detail directions of API and demo in here. There are diffent contents in the mode of PC and Mobile. PC emphasis on document, Mobile emphasis on example.

Direction

This project is based on canvas plugin signature_pad, and the canvas plugin only has basic functions, like signature canvas. I have encapsulated it with Angular which has the following features:

• Provide API more suitable style for Angular.
• Provide features not available in native plugins, like modify state of signature manually、revert painting、fullScreen to sign and so on.
• You can change the config in run time, such as width/height.

Install

Via NPM

npm install --save @eve-sama/ngx-signature-pad

Via yarn

yarn add --save @eve-sama/ngx-signature-pad

Usage

AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NgxSignaturePadModule } from '@eve-sama/ngx-signature-pad';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // You need to import module of ngx-signature-pad
    NgxSignaturePadModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent

<ngx-signature-pad
  #signature
  [options]="options"
  (beginSign)="onBeginSign()"
  (endSign)="onEndSign()">
</ngx-signature-pad>

import { Component, ViewChild } from '@angular/core';
import { NgxSignaturePadComponent, NgxSignatureOptions } from '@eve-sama/ngx-signature-pad';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  /** Catch object, call functions via instance object */
  @ViewChild('signature') signature: NgxSignaturePadComponent;

  /** You can see more introduction in the below about NgxSignatureOptions */
  public options: NgxSignatureOptions = {
    backgroundColor: '#F4F5F5',
    width: 570,
    height: 300,
    css: {
      'border-radius': '16px'
    }
  };

  /** The begin event of sign */
  onBeginSign(): void { }

  /** The end event of sign */
  onEndSign(): void { }
}

NgxSignatureOptions

Instance Method

Modify config during run time

This plugin allow you modify config during run time, just modify the options that you want to pass. Notice that you can not only change the attribute of options. Because OnChanges does not trigger under this circumstance. You need to reassign the options. For example, the initial options as below:

const options: NgxSignatureOptions = {
  penColor: 'rgb(0, 0, 0)', // Black
  width: 300,
  height: 150
};

After run code, if you wan to change the color of pen, if you write code as below, it does not work.

options.penColor = 'rgb(255, 0, 0)'; // Does not work, because can not trigger OnChanges

You need to reassign as below.

const options: NgxSignatureOptions = {
  penColor: 'rgb(255, 0, 0)' // Change the black to red
  width: 300,
  height: 150
};