SignatureComponent

Represents the Kendo UI Signature component for Angular.

The Signature allows users to add a hand-drawn signature to forms.

Selector

kendo-signature

Export Name

Accessible in templates as #kendoSignatureInstance="kendoSignature"

Inputs

Name	Type	Default	Description
backgroundColor	any		The background color of the signature. Accepts CSS color names and hex values. The default value is determined by the theme $kendo-input-bg variable.
color	any		The stroke color of the signature. Accepts CSS color names and hex values. The default value is determined by the theme $kendo-input-text variable.
exportScale	number	2	The scale factor for the exported image. The Signature width and height will be multiplied by the scale when converting the signature to an image.
fillMode	InputFillMode		The fillMode property specifies the background and border styles of the signature (see example). The possible values are: flat solid (default) outline none
height	number		The height of the signature in pixels. The height can also be set using inline styles and CSS.
hideLine	boolean	false	A flag indicating whether the dotted line should be displayed in the background.
maximizable	boolean	true	A flag indicating if the signature can be maximized.
popupScale	number	3	The scale factor for the popup. The Signature width and height will be multiplied by the scale when showing the popup.
rounded	InputRounded		The rounded property specifies the border radius of the signature (see example). The possible values are: small medium (default) large full (not supported by the Signature) none
size	InputSize		The size property specifies the padding of the Signature internal controls (see example). The possible values are: small medium (default) large none
smooth	boolean	false	A flag indicating whether to smooth out signature lines.
strokeWidth	number	1	The stroke width of the signature.
tabindex	number	0	Specifies the tabindex of the component.
value	string		Gets or sets the value of the signature. The value is a Base64-encoded PNG image.
width	number		Sets the width of the signature in pixels. The width can also be set using inline styles and CSS.

Fields

Name	Type	Default	Description
disabled	boolean	false	Sets the disabled state of the Signature. To disable the component in reactive forms, visit the following article
isFocused	boolean		Indicates whether the Signature wrapper is focused.
isOpen	boolean		Indicates whether the Signature popup is open.
readonly	boolean	false	Sets the read-only state of the Signature.

Events

Name	Type	Description
close	EventEmitter<SignatureCloseEvent>	Fires each time the popup is about to close. This event is preventable. If you cancel it, the popup will remain open.
blur	EventEmitter<any>	Fires each time the Signature is blurred.
focus	EventEmitter<any>	Fires each time Signature is focused.
open	EventEmitter<SignatureOpenEvent>	Fires each time the popup is about to open. This event is preventable. If you cancel it, the popup will remain closed.
valueChange	EventEmitter<string>	Fires each time the signature value is changed.

Methods

blur
Blurs the Signature.

focus
Focuses the wrapper of the Signature.

reset
Clears the value of the Signature.

toggle
Toggles the popup of the Signature. Does not trigger the open and close events of the component.
Parameters open? boolean An optional parameter. Specifies whether the popup will be opened or closed.