User interaction in Angular Signature component
27 Apr 20248 minutes to read
The below interactions were available in Signature, and we can walk through one by one.
- Undo and Redo
- Clear
- Disabled
- ReadOnly
Undo
In the Signature, every action can be maintained as a snap for undo and redo operations. And maintained SnapIndex for indexing the snap collection.
The undo
method reverts the last action of signature by decreasing SnapIndex value to index previous snap. Here, canUndo
method is used to ensure whether undo can be performed or not.
The redo
method reverts the last undo action of the signature by increasing the SnapIndex to get the next snap. Here, canRedo
method is used to ensure whether redo can be performed or not.
Clear
The clear
method is used to clears the signature and makes the canvas empty. This is also considered in Undo/ Redo. Here, isEmpty
method is used to ensure whether the signature is empty or not.
Disabled
The disabled
property is used to enables/disables the signature component. In the disabled state, the user is not allowed to draw signature. And it can’t be focused until the user enabled the signature.
ReadOnly
The isReadOnly
property is used to enables/disables the ReadOnly Signature. It can be focused but it prevents drawing in Signature.
The following sample explains about user interactions available in signature.
User Integration sample
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;
}
}
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));