• 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

⚠️ 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.

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

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

• 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

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

• multiple="false"

  ,

  allowedExtensions=".jpg,.png,.gif,.webp"

  ,

  maxFileSize=5000000

• Use

  selected

  event to preview before upload
• Auto upload with progress indicator

• Multiple files,

  allowedExtensions=".pdf,.doc,.docx,.xlsx"

• Chunk upload for large files with pause/resume
• Sequential upload to manage server load

• Multiple files, directory upload enabled
• Preview thumbnails using

  selected

  event + FileReader
• Sort by file name before upload

• JWT token injected via

  uploading

  event header
• Custom

  customFormData

  to pass metadata
• Server validates token before saving

• autoUpload=false

  , synchronous form submission
• Required attribute validation with

  data-required-message

• Template-driven or reactive form binding

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

• 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)

• 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

• 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

• Spin button visibility (

  showSpinButton

  )
• Step value configuration (

  step

  property)
• Customizing spin up/down arrow icons
• Arrow key interactions
• Disabling spin buttons

• Adding prefix/suffix with

  prependTemplate

  and

  appendTemplate

• Currency symbols and unit labels
• Action buttons and icons
• Status indicators without affecting validation
• Template usage patterns

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

• 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

• 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

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

• 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

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

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

• 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

• 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

• 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

• 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

• 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 textarea configuration
• Row and column sizing
• Responsive sizing patterns
• Height adjustments and constraints
• Character counting implementation
• Text wrapping and overflow handling

• 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

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;
  }
}

• 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

floatLabelType

placeholder

value

enabled

readonly

showClearButton

cssClass

htmlAttributes

prependTemplate

appendTemplate

multiline

<textarea>

addIcon(position, icons)

position

addAttributes(attributes)

maxlength

removeAttributes(names[])

focusIn()

focusOut()

destroy()

getPersistData()

enablePersistence

• 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

  ).

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

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

• 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

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

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

• draw()

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

• 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

• Stroke width control (

  minStrokeWidth

  ,

  maxStrokeWidth

  ,

  velocity

  )
• Stroke color customization with hex/RGB/named colors
• Background color setup
• Background image integration
• Real-time property updates

• 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

• 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

• 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

• 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