User interaction in Angular Signature component

26 Feb 20268 minutes to read

The Signature component supports the following user interactions to enhance the signing experience:

• Undo and Redo - Navigate through signature history
• Clear - Erase the signature
• Disabled - Disable signature input
• Read-only - View-only mode

Undo

The Signature component maintains a history of actions (snapshots) to support undo/redo functionality. Use the undo method to revert the last action by moving to the previous snapshot. Check if undo is available using canUndo before enabling the undo button.

Use the redo method to repeat the last undone action by moving to the next snapshot. Check if redo is available using canRedo before enabling the redo button.

Clear

The clear method erases the entire signature and resets the canvas. This action is tracked in the undo/redo history. Use isEmpty to check if the signature is empty before performing validation.

Disabled

Use the disabled property to enable or disable signature input. When disabled, users cannot draw, and the component cannot receive focus until re-enabled.

Read-only

Use the isReadOnly property to enable read-only mode. The component remains focusable but prevents any drawing operations, allowing users to view signatures without modification.

The following sample explains about user interactions available in signature.

User Integration sample

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SignatureComponent } from '@syncfusion/ej2-angular-inputs'
import { ButtonModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons'
import { enableRipple } from '@syncfusion/ej2-base';
import { Component, ViewChild } from '@angular/core';
import { Button, ChangeEventArgs } from '@syncfusion/ej2-buttons';
import { getComponent } from '@syncfusion/ej2-base';
import { SignatureModule } from '@syncfusion/ej2-angular-inputs';

enableRipple(true);

@Component({
imports: [
        FormsModule,CheckBoxModule,ButtonModule, SignatureModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <div id="option">
            <table>
                <tr>
                    <td>
                        <button ejs-button id="undo" #undo cssClass="e-primary" (click)="onUndo()" disabled={true}>UNDO</button>
                    </td><td>
                        <button ejs-button id="redo" #redo cssClass="e-primary" (click)="onRedo()" disabled={true}>REDO</button>
                    </td><td>
                        <button ejs-button id="clear" #clear cssClass="e-primary" (click)="onClear()" disabled={true}>CLEAR</button>
                    </td><td>
                        <div id="checkbox1"><ejs-checkbox label="Disable" (change)="onDisableChange($event)"></ejs-checkbox></div>
                        <div id="checkbox1"><ejs-checkbox label="ReadOnly" (change)="onReadOnlyChange($event)"></ejs-checkbox></div>
                    </td>
                </tr>
            </table>
        </div>
        <div id ="signature-control">
           <canvas ejs-signature #signature id="signature" (change)="change()"></canvas>
        </div>
        </div>`
})
export class AppComponent {
    @ViewChild('signature')
    public signature?: SignatureComponent;
    onUndo(): void {
        if (!this.signature.disabled && !this.signature.isReadOnly) {
            this.signature.undo();
        }
    }
    onRedo(): void {
        if (!this.signature.disabled && !this.signature.isReadOnly) {
            this.signature.redo();
        }
    }
    onClear(): void {
        if (!this.signature.disabled && !this.signature.isReadOnly) {
            this.signature.clear();
        }
    }
    onDisableChange(args: ChangeEventArgs): void {
        this.signature.disabled = args.checked;
    }
    onReadOnlyChange(args: ChangeEventArgs): void {
        this.signature.isReadOnly = args.checked;
    }
    change(): void {
        let undoButton: Button = getComponent(document.getElementById("undo"), 'btn');
        let redoButton: Button = getComponent(document.getElementById("redo"), 'btn');
        let clearButton: Button = getComponent(document.getElementById("clear"), 'btn');
        if (!this.signature.disabled && !this.signature.isReadOnly) {
            if (this.signature.canUndo()) {
                undoButton.disabled = false;
            } else {
                undoButton.disabled = true;
            }
            if (this.signature.canRedo()) {
                redoButton.disabled = false;
            } else {
                redoButton.disabled = true;
            }
            if (!this.signature.isEmpty()) {
                clearButton.disabled = false;
            } else {
                clearButton.disabled = true;
            }
        }
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));