How to add Angular signature pad in Angular 11

We have seen popular eCommerce companies like Amazon provides a facility for adding signature on a device when we receive our order. In angular, we can easily implement this feature in our application using third-party libraries. We can also add signatures without using any third party also.

In this tutorial, we have demonstrated how to add an angular signature pad to our application. We have demonstrated two examples of angular signature capture using Javascript signature_pad and angular2-signaturepad libraries.

To used this angular signature capture we have to import angular2-signaturepad library in our app.module.ts file and let import it.

Edit app.component.html template to add the signature component tag and it has some events which are raise while drawing signature on the signature component. We also have two buttons one to clear the signature pad and the other to save in a variable signatureImg which we used to display signature image in our template.

When we capture a signature, it data are saved in base64 string format, this allows us to save signature data in the database, we can also edit or modify the signature easily. In our typescript component file, we have added code to configure Angular signature pad like width, height, and thickness of pen drawing. Let edit app.component.ts file

Leave a Comment