Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filterupdated
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Icons
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigationupdated
    • Notification
    • Pager
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilitiesnew
    Styling & Themes
    Common Features
    Project Setup
    Troubleshooting
New to Kendo UI for Angular? Start a free 30-day trial

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

NameTypeDefaultDescription

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

NameTypeDefaultDescription

disabled

boolean

false

Sets the disabled state of the Signature.

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

NameTypeDescription

close

[EventEmitter]({{ site.data.urls.angular['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]({{ site.data.urls.angular['eventemitter'] }})<any>

Fires each time the Signature is blurred.

focus

[EventEmitter]({{ site.data.urls.angular['eventemitter'] }})<any>

Fires each time Signature is focused.

open

[EventEmitter]({{ site.data.urls.angular['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]({{ site.data.urls.angular['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.