| 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
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',
removeUrl: 'https://your-api/upload/remove'
};
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
<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>
chunkSettings = {
saveUrl: 'https://your-api/upload/save',
removeUrl: 'https://your-api/upload/remove',
chunkSize: 500000
};
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>
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>
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
See Also
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>
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.
Related Documentation
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 textlabelPosition ("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 readyfocus / blur — field focus eventsinput — per-character changevalueChanged — 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 texthtmlAttributes 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
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);
}
}
@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 eventsinput — 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 {}
@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
<ejs-textarea resizeMode="Vertical" [rows]="4"></ejs-textarea>
<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
@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);
console.log(args.currentValue.rgba);
}
}
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
export class AppComponent {
customChars: { [key: string]: string } = {
P: 'P,A,p,a',
M: 'M,m'
};
}
<ejs-maskedtextbox
mask="00:00 >PM"
[customCharacters]="customChars"
placeholder="Time (ex: 10:00 PM)"
floatLabelType="Always">
</ejs-maskedtextbox>
Read Masked Value Programmatically
import { ViewChild } from '@angular/core';
export class AppComponent {
@ViewChild('maskInput') maskInput: any;
getMaskedValue(): void {
const maskedVal = this.maskInput.getMaskedValue();
const rawVal = this.maskInput.value;
}
}
<ejs-maskedtextbox
#maskInput
mask="000-000-0000"
placeholder="Phone">
</ejs-maskedtextbox>
Two-Way Binding with ngModel
export class AppComponent {
phone: string = '';
onPhoneChange(event: any): void {
console.log('Phone changed to:', this.phone);
}
}
<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 incrementsPrecisionType.Half — 0.5 incrementsPrecisionType.Quarter — 0.25 incrementsPrecisionType.Exact — 0.1 increments- Combining precision with initial value
Appearance and Customization
📄 Read: references/appearance.md
- Controlling item count with
itemsCount
