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
-
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.
-
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.
-
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.
-
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.
-
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.
Get Started with Kendo UI for Angular
