Syncfusion Angular Inputs

Implementing Syncfusion Angular Inputs

Uploader

The Syncfusion Angular Uploader (ejs-uploader) is a full-featured file upload component that supports asynchronous uploads, chunk uploading of large files, drag-and-drop, clipboard paste, directory upload, file validation, templates, form integration, JWT authentication, and comprehensive event handling.

Component Overview

The Syncfusion Angular Uploader provides:

• Async upload modes: Auto upload (default) or manual upload with action buttons
• Chunk upload: Split large files into configurable byte-size chunks with retry logic
• Sequential upload: Process files one at a time to reduce server traffic
• File sources: Browse dialog, drag-and-drop, clipboard paste, directory selection
• Validation: File type (extensions), min/max size, custom count limits, duplicate prevention
• Templates: Customize the file list item structure; build fully custom upload UIs
• Form support: HTML form submission, template-driven forms (ngModel), reactive forms (FormGroup)
• Accessibility: WCAG 2.2, Section 508, keyboard navigation, screen reader support
• Localization: Customize all static text via L10n

Documentation & Navigation Guide

⚠️ Agentic use note: This guide links to multiple reference documents. AI agents should read only the sections relevant to the task at hand — do not chain through all references automatically. Follow least-privilege reading: fetch only what is needed.

Getting Started

📄 Read: references/getting-started.md

• Installation of @syncfusion/ej2-angular-inputs ⚠️ Always verify the package version and integrity before running npm install in production pipelines (supply-chain hygiene).
• Package setup, CSS imports, and Angular standalone component usage
• Adding the <ejs-uploader> component
• Configuring async settings (saveUrl, removeUrl)
• Handling success and failure events
• Adding a custom drop area

Asynchronous Upload

📄 Read: references/async-upload.md

• Multiple and single file upload modes (multiple property)
• Save action configuration and server-side handling
• Remove action and postRawFile usage
• Auto upload vs manual upload (autoUpload property)
• Sequential upload (sequentialUpload)
• Preloaded files (files property)
• Adding custom HTTP headers to upload requests

Chunk Upload

📄 Read: references/chunk-upload.md

• Enabling chunk upload via asyncSettings.chunkSize
• Pause, resume, and cancel chunk uploads
• Retry configuration (retryCount, retryAfterDelay)
• chunkSuccess and chunkFailure events
• Server-side chunk assembly implementation

File Validation

📄 Read: references/validation.md

• Restricting file types with allowedExtensions
• Min/max file size constraints (minFileSize, maxFileSize)
• Limiting upload count via the selected event
• Preventing duplicate file uploads
• MIME type validation before upload
• Image/* validation on drag-and-drop

File Sources

📄 Read: references/file-sources.md

• Paste images from clipboard
• Directory (folder) upload with directoryUpload
• Drag-and-drop with built-in and custom drop areas
• Custom drop area styling (.e-upload-drag-hover)
• Triggering file browse from an external button

Templates & Custom UI

📄 Read: references/templates-and-custom-ui.md

• File list template with the template property
• Building a completely custom upload UI (hiding default list with showFileList)
• Customizing action buttons with HTML elements (buttons property)
• Customizing the progress bar appearance
• Preview images before uploading
• Resize images before uploading to server

Form Integration

📄 Read: references/form-integration.md

• Using Uploader inside HTML forms (synchronous submission)
• Template-driven forms with ngModel
• Reactive forms with FormGroup
• Required field validation (required attribute)
• Reset behavior with form reset

Styling & Appearance

📄 Read: references/styling-and-appearance.md

• Customizing the uploader wrapper dimensions
• Styling the browse button
• Customizing the drop area text
• Customizing the file list container
• Hiding the default drop area
• CSS class reference for key Uploader elements

Accessibility & Localization

📄 Read: references/accessibility-and-localization.md

• WCAG 2.2, Section 508, keyboard shortcuts
• Screen reader and RTL support
• Localizing all static labels and messages with L10n

Advanced How-To Patterns

📄 Read: references/advanced-patterns.md

• Upload files programmatically with the upload() method
• Invisible (background) upload
• Adding additional form data with customFormData
• JWT authentication for upload/remove requests
• Show confirmation dialog before removing files
• Get total size of selected files
• Sort selected files in the file list
• Open and edit uploaded files from the server
• Convert uploaded images to binary format

API Reference

📄 Read: references/api.md

• Complete properties, methods, and events reference
• AsyncSettingsModel, ButtonsPropsModel, FilesPropModel
• All event argument types and their fields

Quick Start Example

Minimal file uploader with async upload (Angular 21+ standalone):

import { Component } from '@angular/core';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [UploaderModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-uploader
      [asyncSettings]="asyncSettings"
      [autoUpload]="false"
      (success)="onSuccess($event)"
      (failure)="onFailure($event)">
    </ejs-uploader>
  `
})
export class AppComponent {
  public asyncSettings = {
    saveUrl: 'https://your-api/upload/save',    // Replace with your actual endpoint
    removeUrl: 'https://your-api/upload/remove' // Replace with your actual endpoint
  };

  onSuccess(args: any): void {
    console.log('Upload operation:', args.operation, 'File:', args.file.name);
  }

  onFailure(args: any): void {
    console.error('Upload failed:', args.file.name);
  }
}

CSS Theme Setup (styles.css):

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

Common Patterns

Pattern 1: Auto Upload with Drag-and-Drop

// Automatically uploads dropped or browsed files
<ejs-uploader
  [asyncSettings]="asyncSettings"
  [dropArea]="dropElement"
  [multiple]="true"
  (success)="onSuccess($event)">
</ejs-uploader>

Pattern 2: Chunk Upload for Large Files

<ejs-uploader
  [asyncSettings]="chunkSettings"
  (chunkSuccess)="onChunkSuccess($event)"
  (chunkFailure)="onChunkFailure($event)">
</ejs-uploader>

// In component:
chunkSettings = {
  saveUrl: 'https://your-api/upload/save',    // Replace with your actual endpoint
  removeUrl: 'https://your-api/upload/remove', // Replace with your actual endpoint
  chunkSize: 500000  // 500 KB chunks
};

Pattern 3: Validated Upload (Type + Size)

<ejs-uploader
  [asyncSettings]="asyncSettings"
  allowedExtensions=".jpg,.png,.pdf"
  [minFileSize]="1024"
  [maxFileSize]="5000000">
</ejs-uploader>

Pattern 4: Preloaded Files

<ejs-uploader
  [asyncSettings]="asyncSettings"
  [files]="preloadedFiles">
</ejs-uploader>

// In component:
preloadedFiles = [
  { name: 'report', size: 200000, type: '.pdf' },
  { name: 'photo', size: 500000, type: '.jpg' }
];

Pattern 5: JWT-Authenticated Upload

<ejs-uploader
  [asyncSettings]="asyncSettings"
  (uploading)="addAuthHeader($event)"
  (removing)="addAuthHeader($event)">
</ejs-uploader>

// ⚠️ Never hardcode tokens — always retrieve from a secure auth service (e.g., Angular AuthService or OAuth library).
// ⚠️ Always transmit tokens over HTTPS only. Never pass tokens as URL query parameters.
addAuthHeader(args: any): void {
  args.currentRequest.setRequestHeader('Authorization', `Bearer ${this.token}`);
}

Key Properties

Key Events

Key Methods

Common Use Cases

Use Case 1: Profile Photo Upload

• multiple="false", allowedExtensions=".jpg,.png,.gif,.webp", maxFileSize=5000000
• Use selected event to preview before upload
• Auto upload with progress indicator

Use Case 2: Document Upload Portal

• Multiple files, allowedExtensions=".pdf,.doc,.docx,.xlsx"
• Chunk upload for large files with pause/resume
• Sequential upload to manage server load

Use Case 3: Image Gallery Batch Upload

• Multiple files, directory upload enabled
• Preview thumbnails using selected event + FileReader
• Sort by file name before upload

Use Case 4: Secure File Upload (API-Authenticated)

• JWT token injected via uploading event header
• Custom customFormData to pass metadata
• Server validates token before saving

Use Case 5: Form with Required File

• autoUpload=false, synchronous form submission
• Required attribute validation with data-required-message
• Template-driven or reactive form binding

Next Steps

1. Getting Started → Install package and render basic uploader
2. Async Upload → Configure save/remove URLs and upload modes
3. Validation → Add extension and size constraints
4. Chunk Upload → Handle large files with pause/resume
5. Templates → Customize file list appearance
6. Form Integration → Bind to Angular forms
7. Advanced Patterns → JWT auth, programmatic upload, custom UI
8. API Reference → Full properties, methods, events list

For detailed implementation, start with references/getting-started.md

NumericTextBox

Component Overview

The Syncfusion Angular NumericTextBox is a specialized input control for numeric values. It provides:

• Numeric validation with min/max ranges and strict mode
• Formatting (currency, percentage, decimals)
• Spin buttons for value adjustment
• Adornments (prepend/append templates for icons, labels)
• Accessibility (WCAG 2.2, ARIA, keyboard navigation)
• Localization (multiple cultures and RTL support)
• Form integration (reactive forms, template-driven forms)

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Angular 21+ standalone component setup
• Basic NumericTextBox implementation
• CSS imports and theme configuration
• Range validation with min/max
• Simple formatting example
• Precision and decimals control
• Two-way binding setup
• Reactive forms integration

Formats and Number Styling

📄 Read: references/formats-styling.md

• Standard formats (currency c2, percentage p, numbers n)
• Custom numeric format strings
• Decimal place control
• Currency symbols and localization
• Styling NumericTextBox wrapper and icons
• CSS customization patterns

Spinners and Step Control

📄 Read: references/spinners-and-step.md

• Spin button visibility (showSpinButton)
• Step value configuration (step property)
• Customizing spin up/down arrow icons
• Arrow key interactions
• Disabling spin buttons

Adornments and Templates

📄 Read: references/adornments-and-templates.md

• Adding prefix/suffix with prependTemplate and appendTemplate
• Currency symbols and unit labels
• Action buttons and icons
• Status indicators without affecting validation
• Template usage patterns

Validation and Form Integration

📄 Read: references/validation-and-forms.md

• Range validation (min/max with strictMode)
• Custom validation rules
• Error and warning states
• Reactive forms patterns

Advanced Patterns and Edge Cases

📄 Read: references/advanced-patterns.md

• Maintaining trailing zeros on focus
• Preventing nullable input (always require a value)
• Nullable input configuration
• Clear button behavior
• Read-only and disabled states
• Focus and blur event handling
• Float label types (Always, Auto, Never)
• Performance optimization

Accessibility and Migration

📄 Read: references/accessibility-and-migration.md

• WCAG 2.2 Level AA compliance
• ARIA attributes (spinbutton role, aria-valuemin, aria-valuemax, etc.)
• Keyboard navigation (Arrow Up/Down)
• Screen reader support
• RTL support for right-to-left languages
• EJ1 to EJ2 API migration guide
• Localization and globalization

Globalization and Localization

📄 Read: references/globalization.md

• Locale property configuration
• Culture-specific number formatting
• RTL (right-to-left) support
• International number formats

API Reference

📄 Read: references/api.md

• All component properties with types, defaults, and descriptions
• All public methods with signatures and usage examples
• All events with argument interface details
• ChangeEventArgs, NumericBlurEventArgs, NumericFocusEventArgs interfaces
• Complete summary tables for quick lookup

Quick Start Example

import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { Component } from '@angular/core';

@Component({
  imports: [NumericTextBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-numerictextbox
      value="100"
      min="10"
      max="1000"
      step="5"
      format="c2"
      placeholder="Enter amount">
    </ejs-numerictextbox>
  `
})
export class AppComponent {}

Common Patterns

Currency Input with Validation

<ejs-numerictextbox
  value="50.00"
  format="c2"
  currency="USD"
  min="0"
  max="10000"
  decimals="2"
  strictMode="true">
</ejs-numerictextbox>

Percentage Input

<ejs-numerictextbox
  value="25"
  format="p"
  min="0"
  max="100"
  step="1">
</ejs-numerictextbox>

With Adornments (Unit Label)

<ejs-numerictextbox
  value="100"
  [appendTemplate]="appendUnit">
</ejs-numerictextbox>

<ng-template #appendUnit>
  <span class="unit-label">kg</span>
</ng-template>

Two-Way Binding with Form Control

<ejs-numerictextbox
  [(ngModel)]="quantity"
  min="1"
  max="100"
  step="1">
</ejs-numerictextbox>

Key Properties

Common Use Cases

1. E-Commerce Quantity Input — Product quantity selector with min/max validation
2. Financial Forms — Currency input with currency symbol and decimal places
3. Scientific Applications — High-precision decimal inputs
4. Survey/Form Data — Percentage inputs with 0-100 range
5. Multi-Language Support — Numbers formatted per user locale
6. Accessibility-First Forms — WCAG-compliant numeric inputs
7. Mobile-Friendly — Touch-friendly spin buttons and keyboard input

See Also

• Syncfusion Angular Input Controls
• Angular Forms Documentation
• WCAG 2.2 Accessibility Guidelines
• Syncfusion Theme Studio

TextBox

The Syncfusion Angular TextBox component is a feature-rich input element that enhances the native HTML input with floating labels, validation states, adornments (prepended/appended elements), accessibility support, and comprehensive styling options. This skill guides you through implementation patterns, configuration, and best practices.

Component Overview

The TextBox component provides:

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Create your first TextBox component
• CSS imports and theme selection
• Floating label implementation
• Basic event binding and data binding
• Common setup issues and solutions

Input Features and State Management

📄 Read: references/input-features.md

• Clear button implementation (showClearButton)
• Disabled state (enabled property)
• Read-only state (readonly property)
• HTML attributes configuration (htmlAttributes)
• Supporting input types and attributes
• State management patterns for forms

Adornments and Customization

📄 Read: references/adornments-customization.md

• Prepend and append template usage
• Icon adornments for visual context
• Button adornments (password toggle, clear)
• Validation status indicators
• Unit indicators (currency, temperature, etc.)
• Performance and accessibility considerations

Validation States and Error Handling

📄 Read: references/validation-states.md

• Error, warning, and success validation states
• CSS class approach (e-error, e-warning, e-success)
• Visual feedback patterns
• Adding asterisk for required fields
• Form integration with validation
• Custom error message display

Styling and Appearance Customization

📄 Read: references/styling-appearance.md

• CSS structure and class hierarchy
• Basic sizing (height, font, padding)
• Floating label color customization
• Validation state color changes
• Borders, rounded corners, and advanced styling
• Dynamic styling based on input value
• Theme integration and customization

Multiline and Sizing Features

📄 Read: references/multiline-sizing.md

• Multiline textarea configuration
• Row and column sizing
• Responsive sizing patterns
• Height adjustments and constraints
• Character counting implementation
• Text wrapping and overflow handling

Accessibility and Migration

📄 Read: references/accessibility-migration.md

• WCAG 2.2 and Section 508 compliance
• Keyboard navigation support
• ARIA attributes (aria-labelledby, aria-invalid, aria-disabled)
• Screen reader compatibility
• Migration from CSS TextBox to Angular component
• RTL and mobile accessibility

Quick Start Example

Create a floating label TextBox:

import { Component } from '@angular/core';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TextBoxModule],
  template: `
    <div style="margin: 50px;">
      <h2>Angular TextBox Example</h2>
      <ejs-textbox 
        #textbox
        [floatLabelType]="'Auto'"
        placeholder="Enter your name"
        (input)="onInput($event)"
      ></ejs-textbox>
      <p>Value: {{ textValue }}</p>
    </div>
  `
})
export class AppComponent {
  textValue = '';

  onInput(event: any) {
    this.textValue = event.target.value;
  }
}

Key Points:

• Use floatLabelType="'Auto'" for automatic floating labels
• Import TextBoxModule from @syncfusion/ej2-angular-inputs
• Use standard Angular (input) event binding
• Set placeholder for the floating label text

Common Patterns

Pattern 1: Email Input with Icon Adornment

<ejs-textbox
  placeholder="Email"
  [floatLabelType]="'Auto'"
  [appendTemplate]="'appendTemplate'"
></ejs-textbox>
<ng-template #appendTemplate>
  <span class="e-input-group-icon">✉</span>
</ng-template>

When to Use: Email, username, or other fields with visual context

Pattern 2: Password Toggle

<ejs-textbox
  [type]="passwordVisible ? 'text' : 'password'"
  placeholder="Password"
  [floatLabelType]="'Auto'"
  [appendTemplate]="'toggleTemplate'"
></ejs-textbox>
<ng-template #toggleTemplate>
  <button (click)="togglePassword()">👁</button>
</ng-template>

// Component
togglePassword() {
  this.passwordVisible = !this.passwordVisible;
}

When to Use: Password fields requiring visibility toggle

Pattern 3: Validation with Error Display

<ejs-textbox
  [cssClass]="isValid ? 'e-success' : 'e-error'"
  placeholder="Phone"
  (change)="validatePhone($event)"
></ejs-textbox>
<p *ngIf="!isValid" style="color: red;">{{ errorMessage }}</p>

When to Use: Form fields with validation feedback

Pattern 4: Currency Input with Unit Indicator

<ejs-textbox
  type="number"
  placeholder="Amount"
  [prependTemplate]="'prependTemplate'"
></ejs-textbox>
<ng-template #prependTemplate>
  <span style="padding: 0 8px;">$</span>
</ng-template>

When to Use: Currency, temperature, or measurement inputs

Key Props and Configuration

Refer to the full API summary in references/api.md.

Notes:

• Use CSS class e-corner together with e-outline to show rounded corners for box-model TextBoxes.
• rows and cols are not component properties. To set them on a multiline TextBox, use addAttributes({rows: '5'} as any) in the (created) event handler (see references/multiline-sizing.md).
• For programmatic input creation (dynamic forms), use Input.createInput from @syncfusion/ej2-inputs (see references/input-features.md).

Common Use Cases

1. Contact Form

Multiple TextBox fields with floating labels, validation states, and required field indicators. See validation-states.md and accessibility-migration.md.

2. Search Input with Clear Button

TextBox with showClearButton=true for quick input reset. See input-features.md.

3. Styled Input with Icon Prefix/Suffix

TextBox with prependTemplate or appendTemplate for visual context. See adornments-customization.md.

4. Password Field with Toggle

Password input with visibility toggle button via append template. See adornments-customization.md.

5. Multiline Comment Field

Textarea with row sizing and character counting. See multiline-sizing.md.

6. Accessible Form Field

TextBox with proper ARIA attributes and keyboard support for compliance. See accessibility-migration.md.

Related Documentation

• Syncfusion Angular Inputs: https://ej2.syncfusion.com/angular/documentation/textbox
• TextBox API Reference: https://ej2.syncfusion.com/angular/documentation/api/textbox/
• Angular Input Guide: Angular Official Docs
• WCAG Accessibility: https://www.w3.org/TR/WCAG22/

Next Steps

1. Start with references/textbox-getting-started.md to set up your first TextBox
2. Explore references/textbox-input-features.md for state management
3. Use references/textbox-adornments-customization.md for custom UI
4. Reference references/textbox-validation-states.md for form validation
5. Customize styling with references/textbox-styling-appearance.md
6. Handle advanced cases in references/textbox-multiline-sizing.md and references/textbox-accessibility-migration.md

Signature

The Syncfusion Angular Signature component (ejs-signature) provides a smooth, canvas-based digital signature capture experience with comprehensive features including undo/redo operations, multiple export formats, customizable strokes, and full accessibility support.

Package: @syncfusion/ej2-angular-inputs
Selector: ejs-signature (on a <canvas> element)
Module: SignatureModule

Component Overview

The Signature component provides:

• Smooth Stroke Rendering: Velocity-based stroke width adjustment for natural signing
• Complete Action History: Undo/redo with snapshot tracking
• Multiple Export Formats: PNG, JPEG, SVG, Base64, or Blob
• Full Customization: Stroke properties, colors, and background images
• Accessibility First: WCAG 2.2 compliant with keyboard shortcuts
• Read-only and Disabled States: For view-only or restricted scenarios
• Background Persistence: Option to include/exclude background in saved files

Documentation and Navigation Guide

⚠️ Agentic use note: Read only the sections relevant to your task — do not chain through all references automatically.

Getting Started

📄 Read: references/signature-getting-started.md

• Angular 21 setup and standalone architecture
• Package installation and dependencies
• CSS theme imports and configuration
• Basic component rendering
• First running application

Drawing Signatures Programmatically

📄 Read: references/signature-drawing-signatures.md

• draw() method for text-based signatures
• Font family and font size options
• Render text as signature with custom styling
• User input integration for drawing

User Interactions

📄 Read: references/signature-user-interactions.md

• Undo and redo functionality with canUndo()/canRedo() checks
• Clear method for erasing signatures
• Disabled state for preventing user input
• Read-only mode for view-only scenarios
• Button state management and change events

Customization and Styling

📄 Read: references/signature-customization.md

• Stroke width control (minStrokeWidth, maxStrokeWidth, velocity)
• Stroke color customization with hex/RGB/named colors
• Background color setup
• Background image integration
• Real-time property updates

Opening and Saving Signatures

📄 Read: references/signature-open-save.md

• Load pre-drawn signatures using load() method
• Base64 encoding and URL support
• Save as Base64 with getSignature()
• Save as Blob with saveAsBlob()
• Save as image file (save() method)
• saveWithBackground property for background inclusion

Toolbar Integration

📄 Read: references/signature-toolbar-integration.md

• Complete toolbar setup with undo/redo/save buttons
• Color picker integration for stroke and background colors
• Stroke width controls with dropdown
• Clear and disable toggles
• Button state management with change events
• Full working toolbar example

Accessibility

📄 Read: references/signature-accessibility.md

• WCAG 2.2 and Section 508 compliance
• Keyboard shortcuts (Ctrl+Z, Ctrl+Y, Ctrl+S, Delete)
• Screen reader support and keyboard navigation
• Color contrast and focus indicators
• Mobile device support

API Reference

📄 Read: references/signature-api.md

• Complete properties reference (backgroundColor, strokeColor, disabled, etc.)
• All methods (undo, redo, clear, draw, save, load, etc.)
• Events and event arguments (change, beforeSave, created)
• Parameters and return types

Quick Start Example

import { Component } from '@angular/core';
import { SignatureModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [SignatureModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <h4>Sign here</h4>
      <canvas ejs-signature #signature id="signature"></canvas>
    </div>
  `
})
export class AppComponent {}

CSS Theme Setup (styles.css):

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

Common Patterns

Pattern 1: Capture and Save Signature

import { Component, ViewChild } from '@angular/core';
import { SignatureComponent, SignatureModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [SignatureModule],
  standalone: true,
  selector: 'app-save-signature',
  template: `
    <canvas ejs-signature #signature id="signature"></canvas>
    <button (click)="saveSignature()">Save as PNG</button>
  `
})
export class SaveSignatureComponent {
  @ViewChild('signature') public signature?: SignatureComponent;

  saveSignature(): void {
    if (!this.signature?.isEmpty()) {
      this.signature?.save('Png', 'MySignature');
    }
  }
}

Pattern 2: Undo/Redo with State Management

change(): void {
  this.undoButton.disabled = !this.signature?.canUndo();
  this.redoButton.disabled = !this.signature?.canRedo();
  this.clearButton.disabled = this.signature?.isEmpty() ?? true;
}

Pattern 3: Load and Verify Signature

loadSignature(): void {
  const base64String = (document.getElementById('signatureInput') as any).value;
  try {
    this.signature?.load(base64String);
  } catch (error) {
    console.error('Invalid signature format');
  }
}

Key Properties

Key Methods

Key Events

Common Use Cases

1. Contract/Agreement Signing — Capture user signature and save as Base64 for backend storage
2. Feedback Forms — Embedded signature field with clear/undo controls
3. Document Approval — Load existing signature, verify it is not empty before form submit
4. **Toolbar-

…(truncated)