Kendo UI for Angular

Angular Signature

  • Support your digital document needs by allowing users to draw or import handwritten signatures.
  • Part of the Kendo UI for Angular library along with 110+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
  • Collect Signatures in Your Angular Applications

    The Kendo UI for Angular Signature component enables end-users to draw and place a signature using a mouse or a hand gesture on a touch device. The Signature component can be used as part of a standalone signature application, a web form, and in combination with a PDF export. The key features that your users can take advantage of to customize their signature and adapt it to their needs include styling options, value binding, popup support, and more.

    See the Angular Signature demo


    Signature Component
  • Value Binding

    The Angular Signature component helps you import and export signatures as a data URL. You can use the value, ngModel, or formControlName approaches. You can also set the import or export scale factor to increase or decrease the signature's resultion.

    See the Angular Signature Value Binding demo

  • Appearance

    The Signature component helps you make it look the way you like by providing various appearance properties rather than requiring tedious CSS. These include size, corner radius, line and background color, fill mode, and stroke width.

    See the Angular Signature Appearance demo

    Signature Theme
  • Signature Popup

    The signature panel can be opened in a modal popup to maximize the signature canvas. To configure it, you only need to enable it with one property and set the size as a multiple of the original element size (3x, for example) with another.

    See the Angular Signature Popup demo 

  • Line Smoothing

    The Angular Signature component includes the optional line smoothing feature to help users provide "clean" looking signatures. When drawing a signature on screen with one's finger or mouse, lines are often choppy and jagged. This feature will smooth them out and make them look more natural.

    See the Angular Signature Line Smoothing demo

  • Read-only and Disabled States

    By setting simple properties, you can set the state of the Angular Signature component to read-only or disabled. When it is read-only the user can still perform interactions such as opening the signature in a pop-up. When the state is disabled, no interaction or navigation is possible. 

    See the Angular Signature Read-only and Disabled demos

All Kendo UI for Angular Components

Next Steps

Get Started with Kendo UI for Angular

Kendo UI for Angular - Kendoka