SignatureComponent

Represents the Kendo UI Signature component for Angular.

Use the Signature to let users add a hand-drawn signature to forms.

html

<kendo-signature [(ngModel)]="signatureValue"></kendo-signature>

Selector

kendo-signature

Export Name

Accessible in templates as #kendoSignatureInstance="kendoSignature"

Inputs

Name	Type	Default	Description
backgroundColor	any		Sets 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		Sets 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	Sets the scale factor for the exported image. The Signature width and height are multiplied by this value when converting the signature to an image.
fillMode	InputFillMode	'solid'	Sets the background and border styles of the Signature (see example).
height	number		Sets the height of the Signature in pixels. You can also set the height using inline styles or CSS.
hideLine	boolean	false	When set to true, hides the dotted line in the background.
maximizable	boolean	true	When set to true, allows the Signature to be maximized.
popupScale	number	3	Sets the scale factor for the popup. The Signature width and height are multiplied by this value when showing the popup.
rounded	InputRounded	'medium'	Sets the border radius of the Signature (see example).
size	InputSize	'medium'	Sets the padding of the Signature internal controls (ee example).
smooth	boolean	false	When set to true, smooths out signature lines.
strokeWidth	number	1	Sets 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. You can also set the width using inline styles or CSS.

Fields

Name	Type	Default	Description
disabled	boolean	false	Sets the disabled state of the Signature. Set to true to disable the component and prevent any user interaction. To disable the component in reactive forms, see Managing the Signature Disabled State in Reactive Forms.
isFocused	boolean		Indicates if the Signature wrapper is focused.
isOpen	boolean		Indicates if the Signature popup is open.
readonly	boolean	false	Sets the read-only state of the Signature. Set to true to prevent editing.

Events

Name	Type	Description
close	EventEmitter<SignatureCloseEvent>	Fires before the popup closes. This event is preventable. If you cancel it, the popup stays open.
blur	EventEmitter<any>	Fires when the Signature loses focus.
focus	EventEmitter<any>	Fires when the Signature receives focus.
open	EventEmitter<SignatureOpenEvent>	Fires before the popup opens. This event is preventable. If you cancel it, the popup stays closed.
valueChange	EventEmitter<string>	Fires when the signature value changes.

Methods

blur
Blurs the Signature.

focus
Focuses the Signature wrapper container.

reset
Clears the value of the Signature.

toggle
Toggles the popup of the Signature. Does not trigger the open and close events.
Parameters open? boolean Optional. Set to true to open or false to close the popup.