ワンクリックでManusで任意のスキルを実行

syncfusion-angular-inputs

スター0

フォーク1

更新日2026年6月1日 15:50

A comprehensive guide to implementing Syncfusion Angular Input components, including Uploader, NumericTextBox, TextBox, Signature, CheckBox, OTP Input, RangeSlider, TextArea, ColorPicker, MaskedTextBox, and Rating. This guide is intended for building Angular applications with file upload UIs supporting async and chunked uploads, drag‑and‑drop functionality, numeric inputs with validation and formatting, text inputs with floating labels and custom adornments, digital signature capture with undo, redo, and export capabilities, checkbox multi‑select and indeterminate states, seamless form integration, accessibility compliance, one‑time password (OTP) inputs, programmatic row adjustments, slider tick customization and styling, visual color selection with HSV picker and palette support, masked text input for structured data entry, and interactive star rating components.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

syncfusion

syncfusion/angular-ui-components-skills

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

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

Property	Type	Default	Purpose
`[asyncSettings]`	AsyncSettingsModel	`{saveUrl:'',removeUrl:''}`	Server save/remove URLs and chunk config
`[autoUpload]`	boolean	`true`	Upload immediately on file selection
`[multiple]`	boolean	`true`	Allow selecting multiple files
`[allowedExtensions]`	string	`''`	Comma-separated allowed extensions (e.g., `.jpg,.png`)
`[minFileSize]`	number	`0`	Minimum file size in bytes
`[maxFileSize]`	number	`30000000`	Maximum file size in bytes (~28.6 MB)
`[files]`	FilesPropModel[]	`[]`	Preloaded files from server
`[dropArea]`	string \| HTMLElement	`null`	Custom drop target element or selector
`[directoryUpload]`	boolean	`false`	Enable folder/directory upload
`[sequentialUpload]`	boolean	`false`	Upload files one at a time
`[showFileList]`	boolean	`true`	Show/hide default file list
`[template]`	any	`null`	Custom file list item template
`[buttons]`	ButtonsPropsModel	`{browse,clear,upload}`	Customize button text/HTML
`[enabled]`	boolean	`true`	Enable or disable the component
`[cssClass]`	string	`''`	Additional CSS classes on root element
`[enableRtl]`	boolean	`false`	Right-to-left rendering
`[enableHtmlSanitizer]`	boolean	`true`	Prevent XSS in filenames
`[dropEffect]`	DropEffect	`'Default'`	Drag effect: Copy, Move, Link, None

Key Events

Event	When it Fires	Key Args
`(selected)`	Files selected or dropped	`filesData`, `cancel`, `modifiedFilesData`
`(uploading)`	Before each file upload starts	`fileData`, `currentRequest`, `customFormData`, `cancel`
`(success)`	Upload or remove succeeds	`file`, `operation` (`upload`\|`remove`), `event`
`(failure)`	Upload or remove fails	`file`, `operation`, `event`
`(progress)`	Upload progress	`file`, `event` (loaded, total)
`(removing)`	Before file remove request	`filesData`, `postRawFile`, `currentRequest`
`(beforeRemove)`	Before remove confirmation	`filesData`, `cancel`
`(beforeUpload)`	Before upload process	`fileData`, `customFormData`
`(change)`	File list changes	`file`
`(clearing)`	Before clear all action	`cancel`
`(chunkSuccess)`	Each chunk uploads OK	`chunkIndex`, `totalChunk`, `chunkSize`, `file`
`(chunkFailure)`	Each chunk fails	`chunkIndex`, `totalChunk`, `chunkSize`, `file`, `cancel`
`(chunkUploading)`	Before each chunk upload	`fileData`, `currentRequest`, `customFormData`
`(pausing)`	Chunk upload paused	`file`, `chunkIndex`
`(resuming)`	Chunk upload resumed	`file`, `chunkIndex`
`(canceling)`	Upload canceled	`file`
`(fileListRendering)`	Before each file item renders	`element`, `fileInfo`
`(actionComplete)`	All files processed	`fileData`
`(created)`	Component initialized	—

Key Methods

Method	Purpose
`upload(files?, custom?)`	Programmatically start upload for selected or specific files
`remove(fileData?, custom?, postRawFile?)`	Remove a file from list or server
`cancel(fileData?)`	Cancel an in-progress chunk upload
`pause(fileData?, custom?)`	Pause a chunk upload
`resume(fileData?, custom?)`	Resume a paused chunk upload
`retry(fileData?, fromCanceledStage?, custom?)`	Retry a failed or canceled upload
`clearAll()`	Clear all files from the list
`getFilesData(index?)`	Get file data array shown in the list
`createFileList(fileData)`	Programmatically create file list items
`sortFileList(filesData?)`	Sort file list alphabetically
`bytesToSize(bytes)`	Convert bytes to human-readable KB/MB string
`destroy()`	Destroy the component and detach events

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

Getting Started → Install package and render basic uploader
Async Upload → Configure save/remove URLs and upload modes
Validation → Add extension and size constraints
Chunk Upload → Handle large files with pause/resume
Templates → Customize file list appearance
Form Integration → Bind to Angular forms
Advanced Patterns → JWT auth, programmatic upload, custom UI
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

Property	Type	Purpose	Default
`value`	number	Current numeric value	`null`
`min`	number	Minimum allowed value	`Number.MIN_VALUE`
`max`	number	Maximum allowed value	`Number.MAX_VALUE`
`step`	number	Increment/decrement amount	`1`
`decimals`	number	Decimal places allowed	`null`
`format`	string	Number format (e.g., 'c2', 'n2', 'p')	`null`
`currency`	string	Currency code (e.g., 'USD', 'EUR')	`null`
`strictMode`	boolean	Enforce min/max validation	`false`
`showSpinButton`	boolean	Show up/down spinner buttons	`true`
`showClearButton`	boolean	Show clear button	`false`
`readonly`	boolean	Prevent editing	`false`
`disabled`	boolean	Disable the component	`false`
`locale`	string	Culture code (e.g., 'de-DE', 'fr-FR')	`'en-US'`
`enableRtl`	boolean	Enable right-to-left mode	`false`
`placeholder`	string	Hint text	`null`
`floatLabelType`	string	Label float behavior ('Auto', 'Always', 'Never')	`'Never'`

Common Use Cases

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

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:

Feature	Purpose
Floating Labels	Animated labels that float above input when focused or filled
Validation States	Visual feedback (error, warning, success) with CSS classes
Adornments	Prepend/append custom HTML elements (icons, buttons, units)
Clear Button	Built-in clear functionality to reset input value
Disabled/Read-only States	Control user interaction and editability
HTML Attributes	Support for standard input attributes (type, maxlength, etc.)
Multiline Support	Textarea configuration with row/column sizing
Accessibility	WCAG 2.2 compliance, keyboard navigation, ARIA attributes
RTL Support	Right-to-left language support
Styling Options	CSS classes, validation colors, responsive sizing

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.

Property / Method	Type	Purpose
`floatLabelType`	string	'Auto'
`placeholder`	string	Text shown when empty; used for floating labels
`value`	string	Current input value
`enabled`	boolean	Enable/disable the input (default: true)
`readonly`	boolean	Make input read-only (selectable but not editable)
`showClearButton`	boolean	Display clear button when field has content
`cssClass`	string	Custom CSS classes (e.g., 'e-error', 'e-warning', 'e-success', 'e-small', 'e-bigger', 'e-outline', 'e-corner')
`htmlAttributes`	object	Standard HTML attributes (name, maxlength, type, etc.)
`prependTemplate`	template	Template for content prepended before the input
`appendTemplate`	template	Template for content appended after the input
`multiline`	boolean	Enable textarea mode (renders a `<textarea>`)
`addIcon(position, icons)`	method	Add icon(s) programmatically (`position` = 'append'
`addAttributes(attributes)`	method	Add HTML attributes programmatically (e.g., `maxlength`)
`removeAttributes(names[])`	method	Remove previously added attributes
`focusIn()` / `focusOut()`	method	Programmatically focus or blur the component
`destroy()`	method	Destroy the component instance and detach handlers
`getPersistData()`	method	Return persisted state string (when `enablePersistence` is used)

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.

Next Steps

Start with references/textbox-getting-started.md to set up your first TextBox
Explore references/textbox-input-features.md for state management
Use references/textbox-adornments-customization.md for custom UI
Reference references/textbox-validation-states.md for form validation
Customize styling with references/textbox-styling-appearance.md
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

Property	Type	Default	Purpose
`strokeColor`	string	`'#000000'`	Pen stroke color
`backgroundColor`	string	`'#ffffff'`	Canvas background color
`backgroundImage`	string	`''`	Background image URL ⚠️ Validate and allowlist URLs; avoid untrusted or user-supplied values to prevent mixed-content or open-redirect issues
`minStrokeWidth`	number	`0.5`	Minimum stroke width
`maxStrokeWidth`	number	`2.0`	Maximum stroke width
`velocity`	number	`0.7`	Stroke velocity factor
`saveWithBackground`	boolean	`false`	Include background when saving
`disabled`	boolean	`false`	Disable signature input
`isReadOnly`	boolean	`false`	Read-only (view-only) mode
`enablePersistence`	boolean	`false`	Persist signature across reloads
`cssClass`	string	`''`	Additional CSS classes

Key Methods

Method	Purpose
`undo()`	Undo the last stroke
`redo()`	Redo the last undone stroke
`canUndo()`	Returns `true` if undo is available
`canRedo()`	Returns `true` if redo is available
`clear()`	Erase all strokes
`isEmpty()`	Returns `true` if no strokes drawn
`draw(text, font?, fontSize?)`	Draw text as a signature
`save(type?, fileName?)`	Save as PNG/JPEG/SVG file
`getSignature(type?)`	Get signature as Base64 string
`saveAsBlob(type?)`	Get signature as a Blob
`getBlob(type?)`	Returns a Blob of the signature
`load(signature)`	Load a Base64 or URL signature
`refresh()`	Refresh and redraw the canvas
`destroy()`	Destroy the component

Key Events

Event	When it Fires	Key Args
`(change)`	After each stroke completes	`isEmpty`
`(beforeSave)`	Before `save()` executes	`fileName`, `fileType`, `cancel`
`(created)`	Component initialized	—

Common Use Cases

Contract/Agreement Signing — Capture user signature and save as Base64 for backend storage
Feedback Forms — Embedded signature field with clear/undo controls
Document Approval — Load existing signature, verify it is not empty before form submit
Toolbar-Driven Signing — Full toolbar with color pickers, stroke width, undo/redo, save
Programmatic Signature — Draw typed name as a styled signature via draw() method

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

CheckBox

The Syncfusion Angular CheckBox (ejs-checkbox) is a graphical UI element that lets users select one or more options. It supports checked, unchecked, and indeterminate states, flexible label positioning, size variants, two-way binding with ngModel, full accessibility compliance, and rich CSS customization.

Package: @syncfusion/ej2-angular-buttons
Selector: ejs-checkbox
Module: CheckBoxModule

Component Overview

The CheckBox component provides:

Three States: Checked, unchecked, and indeterminate (partial selection)
Label Control: Caption text with before/after positioning
Size Variants: Default and small (e-small) sizes
Form Support: name/value attributes for HTML form submission, ngModel two-way binding
Accessibility: WCAG 2.2, Section 508, keyboard navigation (Space key), screen reader support
Custom Styling: Color variants, round frames, custom check icons via CSS classes
RTL Support: Right-to-left rendering

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/checkbox-getting-started.md

Installing @syncfusion/ej2-angular-buttons via ng add
CheckBoxModule import in standalone component's imports[]
CSS theme imports (material theme)
Minimal ejs-checkbox setup and running the app
Checked, unchecked, and indeterminate states

Label and Size

📄 Read: references/checkbox-label-and-size.md

label property for caption text
labelPosition ("Before" / "After")
Small size via cssClass="e-small"
Default vs. small size examples

Style and Appearance

📄 Read: references/checkbox-style-and-appearance.md

Color variant customization (primary, success, warning, danger, info) via cssClass
Custom checkbox frame shapes (round checkbox with e-custom)
Custom check icon with e-checkicon
CSS rules for appearance override

Accessibility and RTL

📄 Read: references/checkbox-accessibility.md

WCAG 2.2 / Section 508 compliance
WAI-ARIA attributes (aria-disabled)
Keyboard navigation (Space key)
Right-to-left (enableRtl) support
Screen reader support

How-To Guides

📄 Read: references/checkbox-how-to.md

Name and value in form submission
Two-way binding with ngModel
Enabling right-to-left display
Customized checkbox appearance variants

API Reference

📄 Read: references/checkbox-api.md

All properties: checked, cssClass, disabled, enableHtmlSanitizer, enablePersistence, enableRtl, htmlAttributes, indeterminate, label, labelPosition, locale, name, value
Methods: click(), destroy(), focusIn()
Events: change, created

Quick Start Example

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <ejs-checkbox label="Default"></ejs-checkbox>
    </div>`
})
export class AppComponent { }

CSS Theme Setup (styles.css):

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

Common Patterns

Checked, Unchecked, and Indeterminate States

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ul>
      <li><ejs-checkbox label="Checked" [checked]="true"></ejs-checkbox></li>
      <li><ejs-checkbox label="Unchecked"></ejs-checkbox></li>
      <li><ejs-checkbox label="Indeterminate" [indeterminate]="true"></ejs-checkbox></li>
    </ul>`
})
export class AppComponent { }

Change Event Handler

import { CheckBoxModule, ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-checkbox label="Subscribe" (change)="onChange($event)"></ejs-checkbox>`
})
export class AppComponent {
  onChange(args: ChangeEventArgs): void {
    console.log('Checked:', args.checked);
  }
}

Form Submission with Name and Value

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <form>
      <ejs-checkbox name="Sport" value="Cricket" label="Cricket" [checked]="true"></ejs-checkbox>
      <ejs-checkbox name="Sport" value="Hockey" label="Hockey" [checked]="true"></ejs-checkbox>
      <ejs-checkbox name="Sport" value="Tennis" label="Tennis" [disabled]="true"></ejs-checkbox>
      <button type="submit">Submit</button>
    </form>`
})
export class AppComponent { }

Two-Way Binding with ngModel

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { FormsModule } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule, FormsModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-checkbox [(ngModel)]="isChecked" label="Enable Feature"></ejs-checkbox>
    <p>State: {{ isChecked }}</p>`
})
export class AppComponent {
  public isChecked: boolean = false;
}

Key Properties

Property	Type	Default	Purpose
`label`	string	`''`	Caption text next to checkbox
`checked`	boolean	`false`	Checked state
`indeterminate`	boolean	`false`	Indeterminate (partial) state
`disabled`	boolean	`false`	Disabled state
`labelPosition`	`'Before' \| 'After'`	`'After'`	Label placement
`cssClass`	string	`''`	Custom CSS class(es)
`name`	string	`''`	Form field name
`value`	string	`''`	Form field value
`enableRtl`	boolean	`false`	Right-to-left rendering
`enablePersistence`	boolean	`false`	Persist state across page reloads via browser `localStorage` ⚠️ Do not enable for sensitive or security-critical state
`htmlAttributes`	object	`{}`	Additional HTML attributes

Key Methods

Method	Purpose
`click()`	Programmatically toggle the checkbox
`focusIn()`	Set focus to the checkbox element
`destroy()`	Destroy the component instance

Key Events

Event	When it Fires	Key Args
`(change)`	Checked state changes	`checked`, `event`
`(created)`	Component initialized	—

Common Use Cases

Multi-Select Form Fields — Group checkboxes with name/value for form POST
Select All / Indeterminate — Parent checkbox with [indeterminate] based on child states
Feature Toggles — Single checkbox with ngModel two-way binding
Accessible Forms — WCAG-compliant checkboxes with keyboard and screen reader support
Styled Checkboxes — Round or color-variant checkboxes via cssClass

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

OTP Input

A focused skill for implementing and customizing the Syncfusion Angular ejs-otpinput component — a multi-box input control designed for one-time password (OTP) and verification code entry flows.

Package: @syncfusion/ej2-angular-inputs
Selector: ejs-otpinput
Module: OtpInputModule

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation via ng add
Angular standalone vs module setup
Basic component rendering
CSS/SCSS theme imports
autoFocus and pre-filled value

Input Types & Value

📄 Read: references/input-types-and-value.md

Number type (digits only, default)
Text type (alphanumeric OTP)
Password type (masked entry)
textTransform (uppercase/lowercase/none)
Setting and reading the value property

Appearance & Layout

📄 Read: references/appearance.md

Configuring OTP length
Disabled state
CSS classes (e-success, e-warning, e-error)
Separator between fields
Placeholder (single char or per-field string)
Styling modes: outlined, filled, underlined

Events

📄 Read: references/events.md

created — component ready
focus / blur — field focus events
input — per-character change
valueChanged — full OTP entered/changed
Practical: validate and submit on OTP completion

Accessibility

📄 Read: references/accessibility.md

WCAG 2.2 / Section 508 / ADA compliance table
ARIA attributes (role=group, aria-label)
ariaLabels property for per-field screen reader text
htmlAttributes for extra HTML attributes
Keyboard navigation shortcuts
RTL support (enableRtl)

API Reference

📄 Read: references/api.md

All properties with types and defaults
Methods: focusIn, focusOut, destroy
All events with argument interfaces
Enum types: OtpInputStyle, OtpInputType, TextTransform

Quick Start

// app.ts (Angular 19+ standalone)
import { Component } from '@angular/core';
import { OtpInputModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  standalone: true,
  imports: [OtpInputModule],
  selector: 'app-root',
  template: `
    <div style="width: 350px;">
      <div ejs-otpinput
        id="otpinput"
        [length]="6"
        placeholder="x"
        (valueChanged)="onOtpComplete($event)">
      </div>
    </div>
  `
})
export class AppComponent {
  onOtpComplete(args: any) {
    console.log('OTP entered:', args.value);
  }
}

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

Common Patterns

Numeric PIN (4 digits)

<div ejs-otpinput [length]="4" type="number"></div>

Masked password entry

<div ejs-otpinput [length]="6" type="password"></div>

OTP with separator and filled style

<div ejs-otpinput [length]="6" separator="-" stylingMode="filled"></div>

Auto-submit when OTP is complete

<div ejs-otpinput [length]="6" (valueChanged)="submitOtp($event)"></div>

Error state after failed verification

<div ejs-otpinput [length]="6" cssClass="e-error" [disabled]="false"></div>

Accessible OTP with ARIA labels

<div ejs-otpinput
  [length]="4"
  [ariaLabels]="['Digit 1', 'Digit 2', 'Digit 3', 'Digit 4']">
</div>

Implementing Syncfusion Angular Range Slider

The Range Slider is a versatile input component from Syncfusion EJ2 Angular that enables users to select single values or ranges from a continuous range. It supports multiple slider types, custom formatting, keyboard navigation, and advanced accessibility features.

Component Overview

The Syncfusion Angular Range Slider (ejs-slider) provides:

Three slider types: Default (single), MinRange (start to current), Range (dual handles)
Orientations: Horizontal and vertical
Interactive elements: Tooltips, increment/decrement buttons, tick marks, limits
Advanced features: Custom formatting, keyboard shortcuts, RTL support
Full accessibility: WCAG 2.2, Section 508, keyboard navigation, ARIA attributes
Form integration: Reactive forms and template-driven forms support

Slider Types at a Glance

Type	Use Case	Handles	Visual
Default	Single value selection	1	Plain slider with one thumb
MinRange	Start-to-current range	1	Shows selection from min to thumb
Range	Min/max range selection	2	Shows selection between two thumbs

Documentation & Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation of @syncfusion/ej2-angular-inputs
Package setup and imports
CSS theme configuration
First working example
Understanding slider types overview

Slider Types & Orientation

📄 Read: references/slider-types-and-orientation.md

When to use Default vs MinRange vs Range types
Horizontal slider implementation (default)
Vertical slider for space-saving layouts
Practical implementation examples
Type selection decision matrix

Ticks, Marks & Limits

📄 Read: references/ticks-and-limits.md

Adding tick marks to slider track
Configuring tick labels and format
Setting min/max limits and boundaries
Step value configuration
Custom tick positioning

Tooltips & Buttons

📄 Read: references/tooltips-and-buttons.md

Enable/disable tooltips
Tooltip placement (Before, After, Above, Below)
Increment/decrement buttons setup
Button behavior in range sliders
Keyboard focus management

Formatting & Value Display

📄 Read: references/formatting-and-values.md

Format API for numeric, percentage, currency formatting
Custom value formatting with events
Internationalization support
Using renderingTicks event for label transformation
Using tooltipChange event for tooltip customization

Styling & Customization

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

CSS classes for track, handle, buttons, ticks
Customizing colors and dimensions
Theme Studio integration
RTL (right-to-left) language support
Responsive design patterns

Forms, Validation & Accessibility

📄 Read: references/form-integration-and-accessibility.md

Reactive forms with FormControl
Template-driven forms with ngModel
Form validation and error states
WCAG 2.2 and Section 508 compliance
Keyboard shortcuts (Arrow keys, Home, End, PageUp/PageDown)
ARIA attributes and screen reader support

Advanced Scenarios

📄 Read: references/advanced-scenarios.md

Date range slider implementation
Time range slider implementation
Numeric range slider with formatting
Reveal slider from hidden state
Performance optimization tips
Common pitfalls and troubleshooting

API Reference

📄 Read: references/api.md

Complete property listing (value, type, min, max, step, orientation, ticks, tooltip, limits, colorRange, enabled, readonly, showButtons, customValues, enableRtl, cssClass, width, enableAnimation, enablePersistence)
All events (change, changed, created, renderingTicks, renderedTicks, tooltipChange)
Methods (destroy, reposition)
Data models: TicksDataModel, TooltipDataModel, LimitDataModel, ColorRangeDataModel
EJ1 → EJ2 migration table
Verified code examples using only documented APIs

Quick Start Example

Here's a minimal range slider in Angular 21+ (standalone):

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

@Component({
  imports: [SliderModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="container">
      <h3>Range Slider</h3>
      <ejs-slider 
        id="range-slider"
        type="Range"
        [min]="0"
        [max]="100"
        [value]="[20, 80]"
        (change)="onSliderChange($event)">
      </ejs-slider>
      <p>Selected range: {{ selectedRange | json }}</p>
    </div>
  `,
  styles: [`
    #container {
      padding: 20px;
    }
    ejs-slider {
      width: 300px;
    }
  `]
})
export class App {
  selectedRange = [20, 80];

  onSliderChange(event: any) {
    this.selectedRange = event.value;
    console.log('Range changed:', this.selectedRange);
  }
}

CSS Theme Setup (in 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-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

Common Patterns

Pattern 1: Range Slider with Limits

<ejs-slider 
  type="Range"
  [min]="0"
  [max]="100"
  [value]="[25, 75]"
  [limits]="{ enabled: true, minStart: 10, minEnd: 90 }">
</ejs-slider>

Pattern 2: Slider with Ticks and Tooltip

<ejs-slider 
  type="Default"
  [value]="50"
  [ticks]="{ placement: 'Before', largeStep: 10, smallStep: 5 }"
  [tooltip]="{ isVisible: true, placement: 'After' }">
</ejs-slider>

Pattern 3: Vertical Slider

<ejs-slider 
  type="Range"
  [value]="[30, 70]"
  orientation="Vertical"
  [style.height]="'300px'">
</ejs-slider>

Pattern 4: Percentage Formatted Slider

<ejs-slider 
  type="Range"
  [value]="[20, 80]"
  [ticks]="{ format: 'P0' }"
  [tooltip]="{ format: 'P0' }">
</ejs-slider>

Key Props & Configuration

Properties

Prop	Type	Default	Purpose
`type`	string	`'Default'`	Slider type: `'Default'`, `'MinRange'`, `'Range'`
`value`	`number \| number[]`	`null`	Current value; use `number[]` for Range type
`min`	number	`0`	Minimum slider value
`max`	number	`100`	Maximum slider value
`step`	number	`1`	Increment/decrement amount per interaction
`orientation`	string	`'Horizontal'`	`'Horizontal'` or `'Vertical'`
`ticks`	`TicksDataModel`	—	Tick marks (placement, largeStep, smallStep, format)
`tooltip`	`TooltipDataModel`	—	Tooltip (isVisible, placement, showOn, format)
`limits`	`LimitDataModel`	—	Restrict thumb movement; must set `enabled: true`
`colorRange`	`ColorRangeDataModel[]`	—	Color segments applied to the track
`enabled`	boolean	`true`	Enable/disable slider
`readonly`	boolean	`false`	Show value but block user interaction
`showButtons`	boolean	`false`	Show increment/decrement buttons
`enableRtl`	boolean	`false`	Right-to-left rendering
`customValues`	`string[] \| number[]`	`null`	Discrete value array; overrides min/max/step
`cssClass`	string	`''`	Custom CSS class(es) on the slider host element
`width`	`number \| string`	`null`	Slider width (px or CSS string)
`enableAnimation`	boolean	`true`	Animate thumb movement
`enablePersistence`	boolean	`false`	Persist value in localStorage across reloads
`locale`	string	`''`	Locale override for value formatting

Events

Event	Fires when	Args key properties
`(change)`	During drag (continuous)	`args.value`, `args.previousValue`
`(changed)`	After drag completes (once)	`args.value`, `args.previousValue`
`(created)`	Slider is initialized	—
`(renderingTicks)`	Each tick is rendering	`args.value`, assign `args.text`
`(renderedTicks)`	All ticks have rendered	`args.ticksWrapper` (DOM)
`(tooltipChange)`	Tooltip is about to show	`args.value`, assign `args.text`

Methods (via `@ViewChild`)

Method	Returns	Purpose
`reposition()`	`void`	Re-render after reveal from hidden state
`destroy()`	`void`	Remove component and detach event listeners

Common Use Cases

Use Case 1: Price Filter

Type: Range
Range: $0-$1000 with $100 steps
Format: Currency (e.g., "$250")
Tooltips: Visible with currency format

Use Case 2: Date Range Selector

Type: Range
Range: 0-365 (days)
Format: Custom (date string from number)
Ticks: Monthly intervals

Use Case 3: Volume Control

Type: Default
Range: 0-100
Format: Percentage (0% - 100%)
Orientation: Vertical

Use Case 4: Form Input with Validation

Type: Range
Integration: Reactive FormControl
Validation: Min 20, Max 80
Error display on invalid state

Next Steps

Start with Getting Started - Set up the component and understand types
Choose your slider type - Read "Slider Types & Orientation"
Configure features - Add ticks, tooltips, buttons as needed
Format values - Implement percentage, currency, or custom formats
Add accessibility - Review keyboard nav and ARIA attributes
Style & customize - Apply theme and CSS customization
Integrate with forms - Bind to FormControl or ngModel with validation
Handle edge cases - Review advanced scenarios and troubleshooting

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

Syncfusion Angular TextArea Component

The Syncfusion Angular TextArea (ejs-textarea) provides a feature-rich multiline text input with floating labels, resize modes, adornments, form integration, and full accessibility support.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Package installation (@syncfusion/ej2-angular-inputs)
Standalone Angular 19+ component setup
CSS/theme imports
Basic TextArea rendering
Getting and setting values (value property, ngModel, change event)

Configuration

📄 Read: references/configuration.md

Floating label (floatLabelType: Auto / Always / Never)
Placeholder with localization (locale property)
Rows and columns (rows / cols properties)
Max length (maxLength property)
Resize modes (resizeMode: Vertical / Horizontal / Both / None)
Width customization (width property)

Adornments

📄 Read: references/adornments.md

Prepend/append custom templates (prependTemplate / appendTemplate)
Adornment flow and orientation (adornmentFlow / adornmentOrientation)
Common patterns: icons, formatting buttons, action buttons

Events

📄 Read: references/events.md

created, destroyed lifecycle events
input — real-time value changes (InputEventArgs)
change — value changed on blur (ChangedEventArgs)
focus / blur — focus state events (FocusInEventArgs / FocusOutEventArgs)

Style & Appearance

📄 Read: references/style-appearance.md

Size variants (e-small, e-bigger)
Filled and outline modes (e-filled, e-outline)
Custom CSS via cssClass property
Disabled (enabled: false) and read-only (readonly: true) states
Show/hide clear button (showClearButton)
Rounded corners, static clear button, RTL (enableRtl)
Custom background, text, and border color overrides
Floating label color for validation states

Form Support

📄 Read: references/form-support.md

HTML form integration
FormValidator integration (required, minLength, maxLength, pattern)
State persistence (enablePersistence)
Custom HTML attributes (htmlAttributes)

API Reference

📄 Read: references/api.md

All properties, methods, and events with types and defaults
Enum types: FloatLabelType, Resize, AdornmentsDirection

Quick Start

ng add @syncfusion/ej2-angular-inputs

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

@Component({
  standalone: true,
  imports: [TextAreaModule],
  selector: 'app-root',
  template: `
    <ejs-textarea
      id="comments"
      placeholder="Enter your comments"
      [floatLabelType]="'Auto'"
      [rows]="4"
      [maxLength]="500">
    </ejs-textarea>
  `
})
export class AppComponent {}

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

Common Patterns

Two-Way Binding with ngModel

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TextAreaModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  standalone: true,
  imports: [TextAreaModule, FormsModule],
  selector: 'app-root',
  template: `<ejs-textarea [(ngModel)]="comment" placeholder="Add comment"></ejs-textarea>`
})
export class AppComponent {
  comment: string = '';
}

Disabled TextArea

<ejs-textarea [enabled]="false" value="Read-only content"></ejs-textarea>

Resize Control

<!-- Vertical resize only -->
<ejs-textarea resizeMode="Vertical" [rows]="4"></ejs-textarea>

<!-- No resize -->
<ejs-textarea resizeMode="None" [rows]="4" [cols]="50"></ejs-textarea>

With Floating Label

<ejs-textarea floatLabelType="Auto" placeholder="Description"></ejs-textarea>

ColorPicker

The Syncfusion Angular ColorPicker lets users pick colors via a visual picker (HSV + opacity) or a palette of swatches. It renders as a SplitButton by default (opens a popup) or inline, and supports RGB, HSV, and Hex color formats.

Package: @syncfusion/ej2-angular-inputs
Component: <ejs-input ejs-colorpicker type="color">

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation with Vite or Angular CLI
npm package setup
CSS theme imports
Minimal working example
Running the application

Modes and Color Value

📄 Read: references/modes-and-value.md

Inline rendering vs popup (SplitButton)
Picker mode vs Palette mode
Setting initial color value (hex codes)
Opacity support
Rendering palette alone (locking mode)

Palette Features

📄 Read: references/palette-features.md

Custom color palettes (presetColors)
Custom palette tile rendering (beforeTileRender)
No-color / clear color support (noColor)
Custom no-color option
Recent colors display (showRecentColors)
Palette column count (columns)

UI Customization

📄 Read: references/ui-customization.md

Hide the input value area
Custom picker handle
Custom primary button with icon
Display hex code in input element
Hide control buttons (Apply/Cancel)
CSS class overrides and Theme Studio
Excel-like custom UI with SplitButton and Dialog

Integration and Advanced

📄 Read: references/integration-and-advanced.md

Embedding ColorPicker in a DropDownButton
Popup toggle control
State persistence across page reloads
Mode switcher visibility and events
Disabled state

Localization and RTL

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

Localizing Apply / Cancel / ModeSwitcher labels
Loading translation objects with L10n
Right-to-left rendering (enableRtl)

Accessibility

📄 Read: references/accessibility.md

WCAG 2.2 / Section 508 compliance
WAI-ARIA attributes
Keyboard navigation shortcuts
Accessibility validation

API Reference

📄 Read: references/api.md

All properties with types and defaults
All methods with signatures
All events with payload types

Quick Start

npm install @syncfusion/ej2-angular-inputs --save

/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-angular-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";

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

@Component({
  selector: 'app-root',
  template: `
    <div id="container">
      <div class="wrap">
        <h4>Choose Color</h4>
        <ejs-input ejs-colorpicker type="color" id="color-picker"></ejs-colorpicker>
      </div>
    </div>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {}

Common Patterns

Inline picker (no popup)

<ejs-input ejs-colorpicker type="color" [inline]="true" [showButtons]="false"></ejs-colorpicker>

Palette-only mode

<ejs-input ejs-colorpicker type="color" mode="Palette" [modeSwitcher]="false" [showButtons]="false"></ejs-colorpicker>

Set initial color + handle changes

import { Component } from '@angular/core';
import { ColorPickerEventArgs, ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color" [value]="colorValue" (change)="onChange($event)"></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {
  public colorValue: string = '#ff5733';

  public onChange(args: ColorPickerEventArgs): void {
    console.log(args.currentValue.hex);  // e.g. "#ff5733"
    console.log(args.currentValue.rgba); // e.g. "rgba(255,87,51,1)"
  }
}

Custom palette with preset colors

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

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color"
      mode="Palette"
      [presetColors]="presets"
      [columns]="4"
      [modeSwitcher]="false"
      [inline]="true"
      [showButtons]="false"
    ></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {
  public presets: { [key: string]: string[] } = {
    brand: ['#0078d4', '#106ebe', '#005a9e', '#004578'],
    accents: ['#e81123', '#ff8c00', '#00b294', '#68217a']
  };
}

Disable opacity slider

<ejs-input ejs-colorpicker type="color" [enableOpacity]="false"></ejs-colorpicker>

No-color support (clear selection)

<ejs-input ejs-colorpicker type="color"
  mode="Palette"
  [noColor]="true"
  [modeSwitcher]="false"
  [showButtons]="false"
></ejs-colorpicker>

Localization (German)

import { Component } from '@angular/core';
import { L10n } from '@syncfusion/ej2-base';
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

L10n.load({
  'de-DE': {
    colorpicker: {
      Apply: 'Anwenden',
      Cancel: 'Abbrechen',
      ModeSwitcher: 'Modus wechseln'
    }
  }
});

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color" locale="de-DE"></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {}

Key Props

Prop	Type	Default	Purpose
`value`	`string`	`'#008000ff'`	Initial color (3/4/6/8 digit hex)
`mode`	`'Picker' \| 'Palette'`	`'Picker'`	Which panel to show initially
`inline`	`boolean`	`false`	Render component directly (no popup)
`showButtons`	`boolean`	`true`	Show Apply/Cancel buttons
`modeSwitcher`	`boolean`	`true`	Show mode switcher button
`noColor`	`boolean`	`false`	Add a "no color" tile to palette
`presetColors`	`object`	`null`	Custom color groups for palette
`columns`	`number`	`10`	Palette columns count
`enableOpacity`	`boolean`	`true`	Show opacity slider
`showRecentColors`	`boolean`	`false`	Show recent color tiles (palette only)
`disabled`	`boolean`	`false`	Disable the component
`cssClass`	`string`	`''`	Custom CSS class on root element
`enableRtl`	`boolean`	`false`	Right-to-left rendering
`locale`	`string`	`''`	Locale string for localization

MaskedTextBox

The Syncfusion Angular MaskedTextBox component enforces a specific input format by applying a mask pattern, guiding users to enter data in the correct structure. It is ideal for phone numbers, postal codes, dates, IP addresses, product keys, and any scenario where input must follow a predefined format.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation via npm (@syncfusion/ej2-angular-inputs)
Angular module setup with MaskedTextBoxModule
CSS imports for theming
Rendering a basic MaskedTextBox
Setting the mask property for format enforcement

Mask Configuration

📄 Read: references/mask-configuration.md

Standard mask element tokens (0, 9, #, L, ?, &, C, A, a, <, >, |, )
Custom characters via customCharacters property
Regular expression masks for flexible patterns (e.g., IP addresses)
Prompt character customization via promptChar

Adornments (Prepend / Append Elements)

📄 Read: references/adornments.md

Adding icons or buttons before/after the input with ng-template
Entry guidance, quick actions, and context labels
Template binding examples

Angular Integration

📄 Read: references/angular-integration.md

Two-way binding with ngModel
Reactive forms with FormControl
Component lifecycle hooks (ngOnInit, ngOnDestroy)
Handling the change event in Angular components
Template reference variables for programmatic access

Style, Appearance & Customization

📄 Read: references/style-and-customization.md

Custom styling with cssClass
CSS overrides for wrapper, hover, and focus states
Setting cursor position on focus using the focus event (selectionStart, selectionEnd)
Displaying numeric keypad on mobile with type="tel"
floatLabelType options (Never, Always, Auto)

Form Validation

📄 Read: references/form-validation.md

Integrating with Syncfusion FormValidator
Defining custom validation rules
Custom error placement with customPlacement
Checking for incomplete masked values using promptChar

API Reference

📄 Read: references/api.md

All properties: mask, value, placeholder, floatLabelType, promptChar, customCharacters, cssClass, enabled, readonly, showClearButton, enableRtl, enablePersistence, htmlAttributes, locale, width
Methods: focusIn(), focusOut(), getMaskedValue(), destroy(), getPersistData()
Events: change, focus, blur, created, destroyed

Quick Start

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MaskedTextBoxModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mask: string = '000-000-0000';
}

app.component.html

<ejs-maskedtextbox
  [mask]="mask"
  placeholder="Enter phone number"
  floatLabelType="Auto">
</ejs-maskedtextbox>

Common Patterns

Phone Number Input

<ejs-maskedtextbox
  mask="000-000-0000"
  placeholder="Phone"
  floatLabelType="Always">
</ejs-maskedtextbox>

IP Address with Regex Mask

<ejs-maskedtextbox
  mask="[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]"
  placeholder="IP Address (ex: 212.212.111.222)"
  floatLabelType="Always">
</ejs-maskedtextbox>

Custom AM/PM Time Input

// app.component.ts
export class AppComponent {
  customChars: { [key: string]: string } = {
    P: 'P,A,p,a',
    M: 'M,m'
  };
}

<!-- app.component.html -->
<ejs-maskedtextbox
  mask="00:00 >PM"
  [customCharacters]="customChars"
  placeholder="Time (ex: 10:00 PM)"
  floatLabelType="Always">
</ejs-maskedtextbox>

Read Masked Value Programmatically

// app.component.ts
import { ViewChild } from '@angular/core';

export class AppComponent {
  @ViewChild('maskInput') maskInput: any;

  getMaskedValue(): void {
    const maskedVal = this.maskInput.getMaskedValue(); // e.g., "123-456-7890"
    const rawVal = this.maskInput.value;               // e.g., "1234567890"
  }
}

<!-- app.component.html -->
<ejs-maskedtextbox
  #maskInput
  mask="000-000-0000"
  placeholder="Phone">
</ejs-maskedtextbox>

Two-Way Binding with ngModel

// app.component.ts
export class AppComponent {
  phone: string = '';

  onPhoneChange(event: any): void {
    console.log('Phone changed to:', this.phone);
  }
}

<!-- app.component.html -->
<ejs-maskedtextbox
  [(ngModel)]="phone"
  mask="000-000-0000"
  (change)="onPhoneChange($event)"
  placeholder="Phone"
  floatLabelType="Auto">
</ejs-maskedtextbox>

Rating

The Syncfusion Angular Rating component lets users select a rating value from a set of visual symbols (stars by default). It supports precision modes, custom templates, tooltips, labels, reset, read-only/disabled states, full accessibility compliance, and rich CSS customization.

Package: @syncfusion/ej2-angular-inputs

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installing @syncfusion/ej2-angular-inputs
CSS theme imports for Tailwind3
Minimal Rating component setup in AppModule
Setting the initial value property
Running the Angular app

Selection and Reset

📄 Read: references/selection.md

Setting a rating value with value
Minimum rating value with min
Single-selection mode with enableSingleSelection
Show/hide reset button with allowReset
Programmatic reset() method

Precision Modes

📄 Read: references/precision-modes.md

PrecisionType.Full — whole number increments
PrecisionType.Half — 0.5 increments
PrecisionType.Quarter — 0.25 increments
PrecisionType.Exact — 0.1 increments
Combining precision with initial value

Appearance and Customization

📄 Read: references/appearance.md

Controlling item count with itemsCount

このリポジトリの他の Skills

同じリポジトリ

syncfusion-angular-gantt-chart

syncfusion/angular-ui-components-skills

Implement and configure the Syncfusion Angular Gantt Chart component (ejs-gantt, GanttModule). Use this when building Angular applications with Gantt chart functionality, task scheduling, dependencies, or resource management. Covers component setup, task dependencies, taskbar editing, critical path analysis, resource allocation, timeline configuration, filtering, sorting, export, undo/redo, state persistence, and localization.

2026-06-090

syncfusion-angular-diagram

syncfusion/angular-ui-components-skills

Build and configure Syncfusion EJ2 Angular Diagram for flowcharts, org charts, process diagrams, and data-visualization. Trigger when users ask to create nodes/connectors, apply layouts, swimlane, use BPMN/UML shapes, or add interactivity like drag-drop, zoom/pan, snapping, editing, and symbol palettes.

2026-06-020

syncfusion-angular-pivot-table

syncfusion/angular-ui-components-skills

Use this skill when users ask how to build or customize Syncfusion PivotView pivot tables in Angular. Trigger for Angular pivot grid/OLAP, aggregation, data binding (JSON/remote), drill-down/drill-through, grouping, filtering, conditional formatting, exports (Excel/PDF/CSV), or pivot charts. Angular-only, not React/Vue/Blazor.

2026-06-020

syncfusion-angular-accumulation-chart

syncfusion/angular-ui-components-skills

Implement and customize Syncfusion Angular Accumulation Charts (Pie, Doughnut, Pyramid, Funnel) with data binding, labels, legends, and tooltips. Use this when creating accumulation charts, configuring chart types, customizing data visualization, adding annotations, or handling interactive chart events in Angular applications.

2026-06-010

syncfusion-angular-bullet-chart

syncfusion/angular-ui-components-skills

Implement Syncfusion Angular Bullet Chart component for performance comparison visualizations. Use this when displaying actual vs target values, defining quality ranges, customizing axes and labels, or creating accessible performance indicators. Covers getting started, data binding, axes configuration, visual elements, and customization.

2026-06-010

syncfusion-angular-buttons

syncfusion/angular-ui-components-skills

Comprehensive guide for implementing Syncfusion Angular button components including Button, ButtonGroup, DropDownButton, Floating Action Button (FAB), ProgressButton, RadioButton, Switch, Speed Dial, SplitButtons, and Chips. Use this when implementing and styling these components - covering visual styles (primary, outline, toggle, icon, round, block), grouping, dropdowns with popup items and animations, FAB positioning/scoping, Speed Dial linear/radial action items, progress-enabled buttons, and toggle/radio controls.

2026-06-010

name	syncfusion-angular-inputs
description	A comprehensive guide to implementing Syncfusion Angular Input components, including Uploader, NumericTextBox, TextBox, Signature, CheckBox, OTP Input, RangeSlider, TextArea, ColorPicker, MaskedTextBox, and Rating. This guide is intended for building Angular applications with file upload UIs supporting async and chunked uploads, drag‑and‑drop functionality, numeric inputs with validation and formatting, text inputs with floating labels and custom adornments, digital signature capture with undo, redo, and export capabilities, checkbox multi‑select and indeterminate states, seamless form integration, accessibility compliance, one‑time password (OTP) inputs, programmatic row adjustments, slider tick customization and styling, visual color selection with HSV picker and palette support, masked text input for structured data entry, and interactive star rating components.
metadata	{"author":"Syncfusion Inc","version":"33.1.44","category":"Inputs"}

Implementing Syncfusion Angular Inputs

Uploader

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

Property	Type	Default	Purpose
`[asyncSettings]`	AsyncSettingsModel	`{saveUrl:'',removeUrl:''}`	Server save/remove URLs and chunk config
`[autoUpload]`	boolean	`true`	Upload immediately on file selection
`[multiple]`	boolean	`true`	Allow selecting multiple files
`[allowedExtensions]`	string	`''`	Comma-separated allowed extensions (e.g., `.jpg,.png`)
`[minFileSize]`	number	`0`	Minimum file size in bytes
`[maxFileSize]`	number	`30000000`	Maximum file size in bytes (~28.6 MB)
`[files]`	FilesPropModel[]	`[]`	Preloaded files from server
`[dropArea]`	string \| HTMLElement	`null`	Custom drop target element or selector
`[directoryUpload]`	boolean	`false`	Enable folder/directory upload
`[sequentialUpload]`	boolean	`false`	Upload files one at a time
`[showFileList]`	boolean	`true`	Show/hide default file list
`[template]`	any	`null`	Custom file list item template
`[buttons]`	ButtonsPropsModel	`{browse,clear,upload}`	Customize button text/HTML
`[enabled]`	boolean	`true`	Enable or disable the component
`[cssClass]`	string	`''`	Additional CSS classes on root element
`[enableRtl]`	boolean	`false`	Right-to-left rendering
`[enableHtmlSanitizer]`	boolean	`true`	Prevent XSS in filenames
`[dropEffect]`	DropEffect	`'Default'`	Drag effect: Copy, Move, Link, None

Key Events

Event	When it Fires	Key Args
`(selected)`	Files selected or dropped	`filesData`, `cancel`, `modifiedFilesData`
`(uploading)`	Before each file upload starts	`fileData`, `currentRequest`, `customFormData`, `cancel`
`(success)`	Upload or remove succeeds	`file`, `operation` (`upload`\|`remove`), `event`
`(failure)`	Upload or remove fails	`file`, `operation`, `event`
`(progress)`	Upload progress	`file`, `event` (loaded, total)
`(removing)`	Before file remove request	`filesData`, `postRawFile`, `currentRequest`
`(beforeRemove)`	Before remove confirmation	`filesData`, `cancel`
`(beforeUpload)`	Before upload process	`fileData`, `customFormData`
`(change)`	File list changes	`file`
`(clearing)`	Before clear all action	`cancel`
`(chunkSuccess)`	Each chunk uploads OK	`chunkIndex`, `totalChunk`, `chunkSize`, `file`
`(chunkFailure)`	Each chunk fails	`chunkIndex`, `totalChunk`, `chunkSize`, `file`, `cancel`
`(chunkUploading)`	Before each chunk upload	`fileData`, `currentRequest`, `customFormData`
`(pausing)`	Chunk upload paused	`file`, `chunkIndex`
`(resuming)`	Chunk upload resumed	`file`, `chunkIndex`
`(canceling)`	Upload canceled	`file`
`(fileListRendering)`	Before each file item renders	`element`, `fileInfo`
`(actionComplete)`	All files processed	`fileData`
`(created)`	Component initialized	—

Key Methods

Method	Purpose
`upload(files?, custom?)`	Programmatically start upload for selected or specific files
`remove(fileData?, custom?, postRawFile?)`	Remove a file from list or server
`cancel(fileData?)`	Cancel an in-progress chunk upload
`pause(fileData?, custom?)`	Pause a chunk upload
`resume(fileData?, custom?)`	Resume a paused chunk upload
`retry(fileData?, fromCanceledStage?, custom?)`	Retry a failed or canceled upload
`clearAll()`	Clear all files from the list
`getFilesData(index?)`	Get file data array shown in the list
`createFileList(fileData)`	Programmatically create file list items
`sortFileList(filesData?)`	Sort file list alphabetically
`bytesToSize(bytes)`	Convert bytes to human-readable KB/MB string
`destroy()`	Destroy the component and detach events

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

Getting Started → Install package and render basic uploader
Async Upload → Configure save/remove URLs and upload modes
Validation → Add extension and size constraints
Chunk Upload → Handle large files with pause/resume
Templates → Customize file list appearance
Form Integration → Bind to Angular forms
Advanced Patterns → JWT auth, programmatic upload, custom UI
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

Property	Type	Purpose	Default
`value`	number	Current numeric value	`null`
`min`	number	Minimum allowed value	`Number.MIN_VALUE`
`max`	number	Maximum allowed value	`Number.MAX_VALUE`
`step`	number	Increment/decrement amount	`1`
`decimals`	number	Decimal places allowed	`null`
`format`	string	Number format (e.g., 'c2', 'n2', 'p')	`null`
`currency`	string	Currency code (e.g., 'USD', 'EUR')	`null`
`strictMode`	boolean	Enforce min/max validation	`false`
`showSpinButton`	boolean	Show up/down spinner buttons	`true`
`showClearButton`	boolean	Show clear button	`false`
`readonly`	boolean	Prevent editing	`false`
`disabled`	boolean	Disable the component	`false`
`locale`	string	Culture code (e.g., 'de-DE', 'fr-FR')	`'en-US'`
`enableRtl`	boolean	Enable right-to-left mode	`false`
`placeholder`	string	Hint text	`null`
`floatLabelType`	string	Label float behavior ('Auto', 'Always', 'Never')	`'Never'`

Common Use Cases

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

TextBox

Component Overview

The TextBox component provides:

Feature	Purpose
Floating Labels	Animated labels that float above input when focused or filled
Validation States	Visual feedback (error, warning, success) with CSS classes
Adornments	Prepend/append custom HTML elements (icons, buttons, units)
Clear Button	Built-in clear functionality to reset input value
Disabled/Read-only States	Control user interaction and editability
HTML Attributes	Support for standard input attributes (type, maxlength, etc.)
Multiline Support	Textarea configuration with row/column sizing
Accessibility	WCAG 2.2 compliance, keyboard navigation, ARIA attributes
RTL Support	Right-to-left language support
Styling Options	CSS classes, validation colors, responsive sizing

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.

Property / Method	Type	Purpose
`floatLabelType`	string	'Auto'
`placeholder`	string	Text shown when empty; used for floating labels
`value`	string	Current input value
`enabled`	boolean	Enable/disable the input (default: true)
`readonly`	boolean	Make input read-only (selectable but not editable)
`showClearButton`	boolean	Display clear button when field has content
`cssClass`	string	Custom CSS classes (e.g., 'e-error', 'e-warning', 'e-success', 'e-small', 'e-bigger', 'e-outline', 'e-corner')
`htmlAttributes`	object	Standard HTML attributes (name, maxlength, type, etc.)
`prependTemplate`	template	Template for content prepended before the input
`appendTemplate`	template	Template for content appended after the input
`multiline`	boolean	Enable textarea mode (renders a `<textarea>`)
`addIcon(position, icons)`	method	Add icon(s) programmatically (`position` = 'append'
`addAttributes(attributes)`	method	Add HTML attributes programmatically (e.g., `maxlength`)
`removeAttributes(names[])`	method	Remove previously added attributes
`focusIn()` / `focusOut()`	method	Programmatically focus or blur the component
`destroy()`	method	Destroy the component instance and detach handlers
`getPersistData()`	method	Return persisted state string (when `enablePersistence` is used)

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.

Next Steps

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

Signature

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

Property	Type	Default	Purpose
`strokeColor`	string	`'#000000'`	Pen stroke color
`backgroundColor`	string	`'#ffffff'`	Canvas background color
`backgroundImage`	string	`''`	Background image URL ⚠️ Validate and allowlist URLs; avoid untrusted or user-supplied values to prevent mixed-content or open-redirect issues
`minStrokeWidth`	number	`0.5`	Minimum stroke width
`maxStrokeWidth`	number	`2.0`	Maximum stroke width
`velocity`	number	`0.7`	Stroke velocity factor
`saveWithBackground`	boolean	`false`	Include background when saving
`disabled`	boolean	`false`	Disable signature input
`isReadOnly`	boolean	`false`	Read-only (view-only) mode
`enablePersistence`	boolean	`false`	Persist signature across reloads
`cssClass`	string	`''`	Additional CSS classes

Key Methods

Method	Purpose
`undo()`	Undo the last stroke
`redo()`	Redo the last undone stroke
`canUndo()`	Returns `true` if undo is available
`canRedo()`	Returns `true` if redo is available
`clear()`	Erase all strokes
`isEmpty()`	Returns `true` if no strokes drawn
`draw(text, font?, fontSize?)`	Draw text as a signature
`save(type?, fileName?)`	Save as PNG/JPEG/SVG file
`getSignature(type?)`	Get signature as Base64 string
`saveAsBlob(type?)`	Get signature as a Blob
`getBlob(type?)`	Returns a Blob of the signature
`load(signature)`	Load a Base64 or URL signature
`refresh()`	Refresh and redraw the canvas
`destroy()`	Destroy the component

Key Events

Event	When it Fires	Key Args
`(change)`	After each stroke completes	`isEmpty`
`(beforeSave)`	Before `save()` executes	`fileName`, `fileType`, `cancel`
`(created)`	Component initialized	—

Common Use Cases

Contract/Agreement Signing — Capture user signature and save as Base64 for backend storage
Feedback Forms — Embedded signature field with clear/undo controls
Document Approval — Load existing signature, verify it is not empty before form submit
Toolbar-Driven Signing — Full toolbar with color pickers, stroke width, undo/redo, save
Programmatic Signature — Draw typed name as a styled signature via draw() method

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

CheckBox

Package: @syncfusion/ej2-angular-buttons
Selector: ejs-checkbox
Module: CheckBoxModule

Component Overview

The CheckBox component provides:

Three States: Checked, unchecked, and indeterminate (partial selection)
Label Control: Caption text with before/after positioning
Size Variants: Default and small (e-small) sizes
Form Support: name/value attributes for HTML form submission, ngModel two-way binding
Accessibility: WCAG 2.2, Section 508, keyboard navigation (Space key), screen reader support
Custom Styling: Color variants, round frames, custom check icons via CSS classes
RTL Support: Right-to-left rendering

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/checkbox-getting-started.md

Installing @syncfusion/ej2-angular-buttons via ng add
CheckBoxModule import in standalone component's imports[]
CSS theme imports (material theme)
Minimal ejs-checkbox setup and running the app
Checked, unchecked, and indeterminate states

Label and Size

📄 Read: references/checkbox-label-and-size.md

label property for caption text
labelPosition ("Before" / "After")
Small size via cssClass="e-small"
Default vs. small size examples

Style and Appearance

📄 Read: references/checkbox-style-and-appearance.md

Color variant customization (primary, success, warning, danger, info) via cssClass
Custom checkbox frame shapes (round checkbox with e-custom)
Custom check icon with e-checkicon
CSS rules for appearance override

Accessibility and RTL

📄 Read: references/checkbox-accessibility.md

WCAG 2.2 / Section 508 compliance
WAI-ARIA attributes (aria-disabled)
Keyboard navigation (Space key)
Right-to-left (enableRtl) support
Screen reader support

How-To Guides

📄 Read: references/checkbox-how-to.md

Name and value in form submission
Two-way binding with ngModel
Enabling right-to-left display
Customized checkbox appearance variants

API Reference

📄 Read: references/checkbox-api.md

All properties: checked, cssClass, disabled, enableHtmlSanitizer, enablePersistence, enableRtl, htmlAttributes, indeterminate, label, labelPosition, locale, name, value
Methods: click(), destroy(), focusIn()
Events: change, created

Quick Start Example

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <ejs-checkbox label="Default"></ejs-checkbox>
    </div>`
})
export class AppComponent { }

CSS Theme Setup (styles.css):

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

Common Patterns

Checked, Unchecked, and Indeterminate States

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ul>
      <li><ejs-checkbox label="Checked" [checked]="true"></ejs-checkbox></li>
      <li><ejs-checkbox label="Unchecked"></ejs-checkbox></li>
      <li><ejs-checkbox label="Indeterminate" [indeterminate]="true"></ejs-checkbox></li>
    </ul>`
})
export class AppComponent { }

Change Event Handler

import { CheckBoxModule, ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-checkbox label="Subscribe" (change)="onChange($event)"></ejs-checkbox>`
})
export class AppComponent {
  onChange(args: ChangeEventArgs): void {
    console.log('Checked:', args.checked);
  }
}

Form Submission with Name and Value

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <form>
      <ejs-checkbox name="Sport" value="Cricket" label="Cricket" [checked]="true"></ejs-checkbox>
      <ejs-checkbox name="Sport" value="Hockey" label="Hockey" [checked]="true"></ejs-checkbox>
      <ejs-checkbox name="Sport" value="Tennis" label="Tennis" [disabled]="true"></ejs-checkbox>
      <button type="submit">Submit</button>
    </form>`
})
export class AppComponent { }

Two-Way Binding with ngModel

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { FormsModule } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule, FormsModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-checkbox [(ngModel)]="isChecked" label="Enable Feature"></ejs-checkbox>
    <p>State: {{ isChecked }}</p>`
})
export class AppComponent {
  public isChecked: boolean = false;
}

Key Properties

Property	Type	Default	Purpose
`label`	string	`''`	Caption text next to checkbox
`checked`	boolean	`false`	Checked state
`indeterminate`	boolean	`false`	Indeterminate (partial) state
`disabled`	boolean	`false`	Disabled state
`labelPosition`	`'Before' \| 'After'`	`'After'`	Label placement
`cssClass`	string	`''`	Custom CSS class(es)
`name`	string	`''`	Form field name
`value`	string	`''`	Form field value
`enableRtl`	boolean	`false`	Right-to-left rendering
`enablePersistence`	boolean	`false`	Persist state across page reloads via browser `localStorage` ⚠️ Do not enable for sensitive or security-critical state
`htmlAttributes`	object	`{}`	Additional HTML attributes

Key Methods

Method	Purpose
`click()`	Programmatically toggle the checkbox
`focusIn()`	Set focus to the checkbox element
`destroy()`	Destroy the component instance

Key Events

Event	When it Fires	Key Args
`(change)`	Checked state changes	`checked`, `event`
`(created)`	Component initialized	—

Common Use Cases

Multi-Select Form Fields — Group checkboxes with name/value for form POST
Select All / Indeterminate — Parent checkbox with [indeterminate] based on child states
Feature Toggles — Single checkbox with ngModel two-way binding
Accessible Forms — WCAG-compliant checkboxes with keyboard and screen reader support
Styled Checkboxes — Round or color-variant checkboxes via cssClass

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

OTP Input

A focused skill for implementing and customizing the Syncfusion Angular ejs-otpinput component — a multi-box input control designed for one-time password (OTP) and verification code entry flows.

Package: @syncfusion/ej2-angular-inputs
Selector: ejs-otpinput
Module: OtpInputModule

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation via ng add
Angular standalone vs module setup
Basic component rendering
CSS/SCSS theme imports
autoFocus and pre-filled value

Input Types & Value

📄 Read: references/input-types-and-value.md

Number type (digits only, default)
Text type (alphanumeric OTP)
Password type (masked entry)
textTransform (uppercase/lowercase/none)
Setting and reading the value property

Appearance & Layout

📄 Read: references/appearance.md

Configuring OTP length
Disabled state
CSS classes (e-success, e-warning, e-error)
Separator between fields
Placeholder (single char or per-field string)
Styling modes: outlined, filled, underlined

Events

📄 Read: references/events.md

created — component ready
focus / blur — field focus events
input — per-character change
valueChanged — full OTP entered/changed
Practical: validate and submit on OTP completion

Accessibility

📄 Read: references/accessibility.md

WCAG 2.2 / Section 508 / ADA compliance table
ARIA attributes (role=group, aria-label)
ariaLabels property for per-field screen reader text
htmlAttributes for extra HTML attributes
Keyboard navigation shortcuts
RTL support (enableRtl)

API Reference

📄 Read: references/api.md

All properties with types and defaults
Methods: focusIn, focusOut, destroy
All events with argument interfaces
Enum types: OtpInputStyle, OtpInputType, TextTransform

Quick Start

// app.ts (Angular 19+ standalone)
import { Component } from '@angular/core';
import { OtpInputModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  standalone: true,
  imports: [OtpInputModule],
  selector: 'app-root',
  template: `
    <div style="width: 350px;">
      <div ejs-otpinput
        id="otpinput"
        [length]="6"
        placeholder="x"
        (valueChanged)="onOtpComplete($event)">
      </div>
    </div>
  `
})
export class AppComponent {
  onOtpComplete(args: any) {
    console.log('OTP entered:', args.value);
  }
}

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

Common Patterns

Numeric PIN (4 digits)

<div ejs-otpinput [length]="4" type="number"></div>

Masked password entry

<div ejs-otpinput [length]="6" type="password"></div>

OTP with separator and filled style

<div ejs-otpinput [length]="6" separator="-" stylingMode="filled"></div>

Auto-submit when OTP is complete

<div ejs-otpinput [length]="6" (valueChanged)="submitOtp($event)"></div>

Error state after failed verification

<div ejs-otpinput [length]="6" cssClass="e-error" [disabled]="false"></div>

Accessible OTP with ARIA labels

<div ejs-otpinput
  [length]="4"
  [ariaLabels]="['Digit 1', 'Digit 2', 'Digit 3', 'Digit 4']">
</div>

Implementing Syncfusion Angular Range Slider

Component Overview

The Syncfusion Angular Range Slider (ejs-slider) provides:

Three slider types: Default (single), MinRange (start to current), Range (dual handles)
Orientations: Horizontal and vertical
Interactive elements: Tooltips, increment/decrement buttons, tick marks, limits
Advanced features: Custom formatting, keyboard shortcuts, RTL support
Full accessibility: WCAG 2.2, Section 508, keyboard navigation, ARIA attributes
Form integration: Reactive forms and template-driven forms support

Slider Types at a Glance

Type	Use Case	Handles	Visual
Default	Single value selection	1	Plain slider with one thumb
MinRange	Start-to-current range	1	Shows selection from min to thumb
Range	Min/max range selection	2	Shows selection between two thumbs

Documentation & Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation of @syncfusion/ej2-angular-inputs
Package setup and imports
CSS theme configuration
First working example
Understanding slider types overview

Slider Types & Orientation

📄 Read: references/slider-types-and-orientation.md

When to use Default vs MinRange vs Range types
Horizontal slider implementation (default)
Vertical slider for space-saving layouts
Practical implementation examples
Type selection decision matrix

Ticks, Marks & Limits

📄 Read: references/ticks-and-limits.md

Adding tick marks to slider track
Configuring tick labels and format
Setting min/max limits and boundaries
Step value configuration
Custom tick positioning

Tooltips & Buttons

📄 Read: references/tooltips-and-buttons.md

Enable/disable tooltips
Tooltip placement (Before, After, Above, Below)
Increment/decrement buttons setup
Button behavior in range sliders
Keyboard focus management

Formatting & Value Display

📄 Read: references/formatting-and-values.md

Format API for numeric, percentage, currency formatting
Custom value formatting with events
Internationalization support
Using renderingTicks event for label transformation
Using tooltipChange event for tooltip customization

Styling & Customization

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

CSS classes for track, handle, buttons, ticks
Customizing colors and dimensions
Theme Studio integration
RTL (right-to-left) language support
Responsive design patterns

Forms, Validation & Accessibility

📄 Read: references/form-integration-and-accessibility.md

Reactive forms with FormControl
Template-driven forms with ngModel
Form validation and error states
WCAG 2.2 and Section 508 compliance
Keyboard shortcuts (Arrow keys, Home, End, PageUp/PageDown)
ARIA attributes and screen reader support

Advanced Scenarios

📄 Read: references/advanced-scenarios.md

Date range slider implementation
Time range slider implementation
Numeric range slider with formatting
Reveal slider from hidden state
Performance optimization tips
Common pitfalls and troubleshooting

API Reference

📄 Read: references/api.md

Complete property listing (value, type, min, max, step, orientation, ticks, tooltip, limits, colorRange, enabled, readonly, showButtons, customValues, enableRtl, cssClass, width, enableAnimation, enablePersistence)
All events (change, changed, created, renderingTicks, renderedTicks, tooltipChange)
Methods (destroy, reposition)
Data models: TicksDataModel, TooltipDataModel, LimitDataModel, ColorRangeDataModel
EJ1 → EJ2 migration table
Verified code examples using only documented APIs

Quick Start Example

Here's a minimal range slider in Angular 21+ (standalone):

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

@Component({
  imports: [SliderModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="container">
      <h3>Range Slider</h3>
      <ejs-slider 
        id="range-slider"
        type="Range"
        [min]="0"
        [max]="100"
        [value]="[20, 80]"
        (change)="onSliderChange($event)">
      </ejs-slider>
      <p>Selected range: {{ selectedRange | json }}</p>
    </div>
  `,
  styles: [`
    #container {
      padding: 20px;
    }
    ejs-slider {
      width: 300px;
    }
  `]
})
export class App {
  selectedRange = [20, 80];

  onSliderChange(event: any) {
    this.selectedRange = event.value;
    console.log('Range changed:', this.selectedRange);
  }
}

CSS Theme Setup (in 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-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

Common Patterns

Pattern 1: Range Slider with Limits

<ejs-slider 
  type="Range"
  [min]="0"
  [max]="100"
  [value]="[25, 75]"
  [limits]="{ enabled: true, minStart: 10, minEnd: 90 }">
</ejs-slider>

Pattern 2: Slider with Ticks and Tooltip

<ejs-slider 
  type="Default"
  [value]="50"
  [ticks]="{ placement: 'Before', largeStep: 10, smallStep: 5 }"
  [tooltip]="{ isVisible: true, placement: 'After' }">
</ejs-slider>

Pattern 3: Vertical Slider

<ejs-slider 
  type="Range"
  [value]="[30, 70]"
  orientation="Vertical"
  [style.height]="'300px'">
</ejs-slider>

Pattern 4: Percentage Formatted Slider

<ejs-slider 
  type="Range"
  [value]="[20, 80]"
  [ticks]="{ format: 'P0' }"
  [tooltip]="{ format: 'P0' }">
</ejs-slider>

Key Props & Configuration

Properties

Prop	Type	Default	Purpose
`type`	string	`'Default'`	Slider type: `'Default'`, `'MinRange'`, `'Range'`
`value`	`number \| number[]`	`null`	Current value; use `number[]` for Range type
`min`	number	`0`	Minimum slider value
`max`	number	`100`	Maximum slider value
`step`	number	`1`	Increment/decrement amount per interaction
`orientation`	string	`'Horizontal'`	`'Horizontal'` or `'Vertical'`
`ticks`	`TicksDataModel`	—	Tick marks (placement, largeStep, smallStep, format)
`tooltip`	`TooltipDataModel`	—	Tooltip (isVisible, placement, showOn, format)
`limits`	`LimitDataModel`	—	Restrict thumb movement; must set `enabled: true`
`colorRange`	`ColorRangeDataModel[]`	—	Color segments applied to the track
`enabled`	boolean	`true`	Enable/disable slider
`readonly`	boolean	`false`	Show value but block user interaction
`showButtons`	boolean	`false`	Show increment/decrement buttons
`enableRtl`	boolean	`false`	Right-to-left rendering
`customValues`	`string[] \| number[]`	`null`	Discrete value array; overrides min/max/step
`cssClass`	string	`''`	Custom CSS class(es) on the slider host element
`width`	`number \| string`	`null`	Slider width (px or CSS string)
`enableAnimation`	boolean	`true`	Animate thumb movement
`enablePersistence`	boolean	`false`	Persist value in localStorage across reloads
`locale`	string	`''`	Locale override for value formatting

Events

Event	Fires when	Args key properties
`(change)`	During drag (continuous)	`args.value`, `args.previousValue`
`(changed)`	After drag completes (once)	`args.value`, `args.previousValue`
`(created)`	Slider is initialized	—
`(renderingTicks)`	Each tick is rendering	`args.value`, assign `args.text`
`(renderedTicks)`	All ticks have rendered	`args.ticksWrapper` (DOM)
`(tooltipChange)`	Tooltip is about to show	`args.value`, assign `args.text`

Methods (via `@ViewChild`)

Method	Returns	Purpose
`reposition()`	`void`	Re-render after reveal from hidden state
`destroy()`	`void`	Remove component and detach event listeners

Common Use Cases

Use Case 1: Price Filter

Type: Range
Range: $0-$1000 with $100 steps
Format: Currency (e.g., "$250")
Tooltips: Visible with currency format

Use Case 2: Date Range Selector

Type: Range
Range: 0-365 (days)
Format: Custom (date string from number)
Ticks: Monthly intervals

Use Case 3: Volume Control

Type: Default
Range: 0-100
Format: Percentage (0% - 100%)
Orientation: Vertical

Use Case 4: Form Input with Validation

Type: Range
Integration: Reactive FormControl
Validation: Min 20, Max 80
Error display on invalid state

Next Steps

Start with Getting Started - Set up the component and understand types
Choose your slider type - Read "Slider Types & Orientation"
Configure features - Add ticks, tooltips, buttons as needed
Format values - Implement percentage, currency, or custom formats
Add accessibility - Review keyboard nav and ARIA attributes
Style & customize - Apply theme and CSS customization
Integrate with forms - Bind to FormControl or ngModel with validation
Handle edge cases - Review advanced scenarios and troubleshooting

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

Syncfusion Angular TextArea Component

The Syncfusion Angular TextArea (ejs-textarea) provides a feature-rich multiline text input with floating labels, resize modes, adornments, form integration, and full accessibility support.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Package installation (@syncfusion/ej2-angular-inputs)
Standalone Angular 19+ component setup
CSS/theme imports
Basic TextArea rendering
Getting and setting values (value property, ngModel, change event)

Configuration

📄 Read: references/configuration.md

Floating label (floatLabelType: Auto / Always / Never)
Placeholder with localization (locale property)
Rows and columns (rows / cols properties)
Max length (maxLength property)
Resize modes (resizeMode: Vertical / Horizontal / Both / None)
Width customization (width property)

Adornments

📄 Read: references/adornments.md

Prepend/append custom templates (prependTemplate / appendTemplate)
Adornment flow and orientation (adornmentFlow / adornmentOrientation)
Common patterns: icons, formatting buttons, action buttons

Events

📄 Read: references/events.md

created, destroyed lifecycle events
input — real-time value changes (InputEventArgs)
change — value changed on blur (ChangedEventArgs)
focus / blur — focus state events (FocusInEventArgs / FocusOutEventArgs)

Style & Appearance

📄 Read: references/style-appearance.md

Size variants (e-small, e-bigger)
Filled and outline modes (e-filled, e-outline)
Custom CSS via cssClass property
Disabled (enabled: false) and read-only (readonly: true) states
Show/hide clear button (showClearButton)
Rounded corners, static clear button, RTL (enableRtl)
Custom background, text, and border color overrides
Floating label color for validation states

Form Support

📄 Read: references/form-support.md

HTML form integration
FormValidator integration (required, minLength, maxLength, pattern)
State persistence (enablePersistence)
Custom HTML attributes (htmlAttributes)

API Reference

📄 Read: references/api.md

All properties, methods, and events with types and defaults
Enum types: FloatLabelType, Resize, AdornmentsDirection

Quick Start

ng add @syncfusion/ej2-angular-inputs

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

@Component({
  standalone: true,
  imports: [TextAreaModule],
  selector: 'app-root',
  template: `
    <ejs-textarea
      id="comments"
      placeholder="Enter your comments"
      [floatLabelType]="'Auto'"
      [rows]="4"
      [maxLength]="500">
    </ejs-textarea>
  `
})
export class AppComponent {}

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

Common Patterns

Two-Way Binding with ngModel

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TextAreaModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  standalone: true,
  imports: [TextAreaModule, FormsModule],
  selector: 'app-root',
  template: `<ejs-textarea [(ngModel)]="comment" placeholder="Add comment"></ejs-textarea>`
})
export class AppComponent {
  comment: string = '';
}

Disabled TextArea

<ejs-textarea [enabled]="false" value="Read-only content"></ejs-textarea>

Resize Control

<!-- Vertical resize only -->
<ejs-textarea resizeMode="Vertical" [rows]="4"></ejs-textarea>

<!-- No resize -->
<ejs-textarea resizeMode="None" [rows]="4" [cols]="50"></ejs-textarea>

With Floating Label

<ejs-textarea floatLabelType="Auto" placeholder="Description"></ejs-textarea>

ColorPicker

Package: @syncfusion/ej2-angular-inputs
Component: <ejs-input ejs-colorpicker type="color">

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation with Vite or Angular CLI
npm package setup
CSS theme imports
Minimal working example
Running the application

Modes and Color Value

📄 Read: references/modes-and-value.md

Inline rendering vs popup (SplitButton)
Picker mode vs Palette mode
Setting initial color value (hex codes)
Opacity support
Rendering palette alone (locking mode)

Palette Features

📄 Read: references/palette-features.md

Custom color palettes (presetColors)
Custom palette tile rendering (beforeTileRender)
No-color / clear color support (noColor)
Custom no-color option
Recent colors display (showRecentColors)
Palette column count (columns)

UI Customization

📄 Read: references/ui-customization.md

Hide the input value area
Custom picker handle
Custom primary button with icon
Display hex code in input element
Hide control buttons (Apply/Cancel)
CSS class overrides and Theme Studio
Excel-like custom UI with SplitButton and Dialog

Integration and Advanced

📄 Read: references/integration-and-advanced.md

Embedding ColorPicker in a DropDownButton
Popup toggle control
State persistence across page reloads
Mode switcher visibility and events
Disabled state

Localization and RTL

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

Localizing Apply / Cancel / ModeSwitcher labels
Loading translation objects with L10n
Right-to-left rendering (enableRtl)

Accessibility

📄 Read: references/accessibility.md

WCAG 2.2 / Section 508 compliance
WAI-ARIA attributes
Keyboard navigation shortcuts
Accessibility validation

API Reference

📄 Read: references/api.md

All properties with types and defaults
All methods with signatures
All events with payload types

Quick Start

npm install @syncfusion/ej2-angular-inputs --save

/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-angular-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";

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

@Component({
  selector: 'app-root',
  template: `
    <div id="container">
      <div class="wrap">
        <h4>Choose Color</h4>
        <ejs-input ejs-colorpicker type="color" id="color-picker"></ejs-colorpicker>
      </div>
    </div>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {}

Common Patterns

Inline picker (no popup)

<ejs-input ejs-colorpicker type="color" [inline]="true" [showButtons]="false"></ejs-colorpicker>

Palette-only mode

<ejs-input ejs-colorpicker type="color" mode="Palette" [modeSwitcher]="false" [showButtons]="false"></ejs-colorpicker>

Set initial color + handle changes

import { Component } from '@angular/core';
import { ColorPickerEventArgs, ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color" [value]="colorValue" (change)="onChange($event)"></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {
  public colorValue: string = '#ff5733';

  public onChange(args: ColorPickerEventArgs): void {
    console.log(args.currentValue.hex);  // e.g. "#ff5733"
    console.log(args.currentValue.rgba); // e.g. "rgba(255,87,51,1)"
  }
}

Custom palette with preset colors

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

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color"
      mode="Palette"
      [presetColors]="presets"
      [columns]="4"
      [modeSwitcher]="false"
      [inline]="true"
      [showButtons]="false"
    ></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {
  public presets: { [key: string]: string[] } = {
    brand: ['#0078d4', '#106ebe', '#005a9e', '#004578'],
    accents: ['#e81123', '#ff8c00', '#00b294', '#68217a']
  };
}

Disable opacity slider

<ejs-input ejs-colorpicker type="color" [enableOpacity]="false"></ejs-colorpicker>

No-color support (clear selection)

<ejs-input ejs-colorpicker type="color"
  mode="Palette"
  [noColor]="true"
  [modeSwitcher]="false"
  [showButtons]="false"
></ejs-colorpicker>

Localization (German)

import { Component } from '@angular/core';
import { L10n } from '@syncfusion/ej2-base';
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

L10n.load({
  'de-DE': {
    colorpicker: {
      Apply: 'Anwenden',
      Cancel: 'Abbrechen',
      ModeSwitcher: 'Modus wechseln'
    }
  }
});

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color" locale="de-DE"></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {}

Key Props

Prop	Type	Default	Purpose
`value`	`string`	`'#008000ff'`	Initial color (3/4/6/8 digit hex)
`mode`	`'Picker' \| 'Palette'`	`'Picker'`	Which panel to show initially
`inline`	`boolean`	`false`	Render component directly (no popup)
`showButtons`	`boolean`	`true`	Show Apply/Cancel buttons
`modeSwitcher`	`boolean`	`true`	Show mode switcher button
`noColor`	`boolean`	`false`	Add a "no color" tile to palette
`presetColors`	`object`	`null`	Custom color groups for palette
`columns`	`number`	`10`	Palette columns count
`enableOpacity`	`boolean`	`true`	Show opacity slider
`showRecentColors`	`boolean`	`false`	Show recent color tiles (palette only)
`disabled`	`boolean`	`false`	Disable the component
`cssClass`	`string`	`''`	Custom CSS class on root element
`enableRtl`	`boolean`	`false`	Right-to-left rendering
`locale`	`string`	`''`	Locale string for localization

MaskedTextBox

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation via npm (@syncfusion/ej2-angular-inputs)
Angular module setup with MaskedTextBoxModule
CSS imports for theming
Rendering a basic MaskedTextBox
Setting the mask property for format enforcement

Mask Configuration

📄 Read: references/mask-configuration.md

Standard mask element tokens (0, 9, #, L, ?, &, C, A, a, <, >, |, )
Custom characters via customCharacters property
Regular expression masks for flexible patterns (e.g., IP addresses)
Prompt character customization via promptChar

Adornments (Prepend / Append Elements)

📄 Read: references/adornments.md

Adding icons or buttons before/after the input with ng-template
Entry guidance, quick actions, and context labels
Template binding examples

Angular Integration

📄 Read: references/angular-integration.md

Two-way binding with ngModel
Reactive forms with FormControl
Component lifecycle hooks (ngOnInit, ngOnDestroy)
Handling the change event in Angular components
Template reference variables for programmatic access

Style, Appearance & Customization

📄 Read: references/style-and-customization.md

Custom styling with cssClass
CSS overrides for wrapper, hover, and focus states
Setting cursor position on focus using the focus event (selectionStart, selectionEnd)
Displaying numeric keypad on mobile with type="tel"
floatLabelType options (Never, Always, Auto)

Form Validation

📄 Read: references/form-validation.md

Integrating with Syncfusion FormValidator
Defining custom validation rules
Custom error placement with customPlacement
Checking for incomplete masked values using promptChar

API Reference

📄 Read: references/api.md

All properties: mask, value, placeholder, floatLabelType, promptChar, customCharacters, cssClass, enabled, readonly, showClearButton, enableRtl, enablePersistence, htmlAttributes, locale, width
Methods: focusIn(), focusOut(), getMaskedValue(), destroy(), getPersistData()
Events: change, focus, blur, created, destroyed

Quick Start

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MaskedTextBoxModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mask: string = '000-000-0000';
}

app.component.html

<ejs-maskedtextbox
  [mask]="mask"
  placeholder="Enter phone number"
  floatLabelType="Auto">
</ejs-maskedtextbox>

Common Patterns

Phone Number Input

<ejs-maskedtextbox
  mask="000-000-0000"
  placeholder="Phone"
  floatLabelType="Always">
</ejs-maskedtextbox>

IP Address with Regex Mask

<ejs-maskedtextbox
  mask="[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]"
  placeholder="IP Address (ex: 212.212.111.222)"
  floatLabelType="Always">
</ejs-maskedtextbox>

Custom AM/PM Time Input

// app.component.ts
export class AppComponent {
  customChars: { [key: string]: string } = {
    P: 'P,A,p,a',
    M: 'M,m'
  };
}

<!-- app.component.html -->
<ejs-maskedtextbox
  mask="00:00 >PM"
  [customCharacters]="customChars"
  placeholder="Time (ex: 10:00 PM)"
  floatLabelType="Always">
</ejs-maskedtextbox>

Read Masked Value Programmatically

// app.component.ts
import { ViewChild } from '@angular/core';

export class AppComponent {
  @ViewChild('maskInput') maskInput: any;

  getMaskedValue(): void {
    const maskedVal = this.maskInput.getMaskedValue(); // e.g., "123-456-7890"
    const rawVal = this.maskInput.value;               // e.g., "1234567890"
  }
}

<!-- app.component.html -->
<ejs-maskedtextbox
  #maskInput
  mask="000-000-0000"
  placeholder="Phone">
</ejs-maskedtextbox>

Two-Way Binding with ngModel

// app.component.ts
export class AppComponent {
  phone: string = '';

  onPhoneChange(event: any): void {
    console.log('Phone changed to:', this.phone);
  }
}

<!-- app.component.html -->
<ejs-maskedtextbox
  [(ngModel)]="phone"
  mask="000-000-0000"
  (change)="onPhoneChange($event)"
  placeholder="Phone"
  floatLabelType="Auto">
</ejs-maskedtextbox>

Rating

Package: @syncfusion/ej2-angular-inputs

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installing @syncfusion/ej2-angular-inputs
CSS theme imports for Tailwind3
Minimal Rating component setup in AppModule
Setting the initial value property
Running the Angular app

Selection and Reset

📄 Read: references/selection.md

Setting a rating value with value
Minimum rating value with min
Single-selection mode with enableSingleSelection
Show/hide reset button with allowReset
Programmatic reset() method

Precision Modes

📄 Read: references/precision-modes.md

PrecisionType.Full — whole number increments
PrecisionType.Half — 0.5 increments
PrecisionType.Quarter — 0.25 increments
PrecisionType.Exact — 0.1 increments
Combining precision with initial value

Appearance and Customization

📄 Read: references/appearance.md

Controlling item count with itemsCount

syncfusion-angular-inputs

Implementing Syncfusion Angular Inputs

Uploader

Component Overview

Documentation & Navigation Guide

Getting Started

Asynchronous Upload

Chunk Upload

File Validation

File Sources

Templates & Custom UI

Form Integration

Styling & Appearance

Accessibility & Localization

Advanced How-To Patterns

API Reference

Quick Start Example

Common Patterns

Pattern 1: Auto Upload with Drag-and-Drop

Pattern 2: Chunk Upload for Large Files

Pattern 3: Validated Upload (Type + Size)

Pattern 4: Preloaded Files

Pattern 5: JWT-Authenticated Upload

Key Properties

Key Events

Key Methods

Common Use Cases

Next Steps

NumericTextBox

Component Overview

Documentation and Navigation Guide

Getting Started

Formats and Number Styling

Spinners and Step Control

Adornments and Templates

Validation and Form Integration

Advanced Patterns and Edge Cases

Accessibility and Migration

Globalization and Localization

API Reference

Quick Start Example

Common Patterns

Currency Input with Validation

Percentage Input

With Adornments (Unit Label)

Two-Way Binding with Form Control

Key Properties

Common Use Cases

See Also

TextBox

Component Overview

Documentation and Navigation Guide

Getting Started

Input Features and State Management

Adornments and Customization

Validation States and Error Handling

Styling and Appearance Customization

Multiline and Sizing Features

Accessibility and Migration

Quick Start Example

Common Patterns

Pattern 1: Email Input with Icon Adornment

Pattern 2: Password Toggle

Pattern 3: Validation with Error Display

Pattern 4: Currency Input with Unit Indicator

Key Props and Configuration

Common Use Cases

1. Contact Form

2. Search Input with Clear Button

3. Styled Input with Icon Prefix/Suffix

4. Password Field with Toggle

5. Multiline Comment Field

6. Accessible Form Field

Related Documentation

Next Steps

Signature

Component Overview

Documentation and Navigation Guide

Getting Started

Drawing Signatures Programmatically