How To Use Signature Pad Using Angular

How to use Signature Pad using Angular

What is Signature Pad?

Signature Pad could be a JavaScript library for drawing fancy signatures. It supports HTML5 canvas and uses variable-width Bezier curve interpolation based on drum sander signatures reported by Square. It works in all major mobile and desktop browsers and does not consider external libraries.

Let's start with a practical example.

There are several npm packages that use for signature in angular however here I actually have used "signature_pad" and I suppose it's extremely straightforward to use and understandable.

So first create the angular project app and follow the below steps.

Step 1: Implement associate degree example Angular signature pad mistreatment the signature_pad JavaScript library. First, let's install the signature_pad library in our project.

npm i signature_pad --save

Once install successfully then go ahead.

In the app.component.html template, we want to feature a canvas to draw our signature. it's 2 buttons. One to clear the signature space and another to urge the signature knowledge in Base64 string format.

We got to outline a canvas component to put in writing the signature. Once you have got the base64 signature, you'll show it as a picture exploitation of the template's IMG element.

Step 2: Let's add HTML code to our app.component.html, Please put the code as same as mine.

<div style="text-align: center;margin-top:30px;">
    <h3 style="font-family: monospace;">Signature Pad example by Rajesh Gami</h3>
    <div style="margin-left: 39%;">
      <canvas #signPadCanvas (touchstart)="startSignPadDrawing($event)" (touchmove)="movedFinger($event)"></canvas>
    </div>
    <button class="btn btn-success" color="secondary" (click)="saveSignPad()">Save</button>
    <button class="btn btn-danger" (click)="clearSignPad()">Clear</button>
    <button class="btn btn-warning" (click)="undoSign()">Undo</button>
    <div>
      <span style="font-family: monospace;">Write the signature and click on Save</span>
      <div>
        <img src='{{ signImage }}' />
      </div>
    </div>
 </div>

Okay so now we need to add code to the app.component.ts file

Step 3: Edit the app.component.ts typescript file code to draw the signature on the canvas and save it in base64 format.

First import SignaturePad from 'signature_pad' and ViewChild from '@angular/core' as shown as below

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

Here I am putting whole the code of the component file, So please make sure it is exactly the same as below.

app.component.ts

import { Component, ViewChild  } from '@angular/core';
import SignaturePad from 'signature_pad';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Signature Pad by Rajesh Gami';
  signPad: any;
  @ViewChild('signPadCanvas', {static: false}) signaturePadElement:any;
  signImage:any;

  constructor() { }

  ngAfterViewInit() {
    this.signPad = new SignaturePad(this.signaturePadElement.nativeElement);
  }
  /*It's work in devices*/
  startSignPadDrawing(event: Event) {
    console.log(event);
  }
  /*It's work in devices*/
  movedFinger(event: Event) {
  }
  /*Undo last step from the signature*/
  undoSign() {
    const data = this.signPad.toData();
    if (data) {
      data.pop(); // remove the last step
      this.signPad.fromData(data);
    }
  }
  /*Clean whole the signature*/
  clearSignPad() {
    this.signPad.clear();
  }
  /*Here you can save the signature as a Image*/
  saveSignPad() {
    const base64ImageData = this.signPad.toDataURL();
    this.signImage = base64ImageData;
    //Here you can save your signature image using your API call.
  }
}

Step 4: After making the canvas element, add designs resembling borders, backgrounds, and so on to the canvas element. Let's put css into the app.component.scss file.

canvas {
  display: block;
  border: 1px solid rgb(105, 105, 105);
  background-color: var(--ion-color-success);
}
button {
  margin: 10px;
  margin-left: 10px;
}

All the code is done now let's run the application and see.

Note*: You can add bootstrap CSS and js for better UI, See the below code and put into the index.html

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Signature Pad by RG</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Output:

You can write the signature under signature and click on the Save button and see.

Here I have written my sign

How to use Signature Pad using Angular

Let's click on Save and see your signature as an Image, And If you want to clear the sign then click on the Clear button, and for undo click on Undo button.

How to use Signature Pad using Angular

Here you can see the image of the written signature, You can save your signature into the database by using API.

For more information regarding "signature_pad" please visit https://www.npmjs.com/package/signature_pad

I hope it's easy to understand. And if you have any questions, feel free to contact me at my email id [email protected] or my LinkedId at any time.