Syncfusion Angular UI Components (Essential JS 2)

The Angular Charts component provides over 50 types of charts and graphs for data visualization, including line, financial, and other specialized types. All chart elements are rendered using Scalable Vector Graphics (SVG) to ensure high-quality rendering.

Data can be bound to the charts from various sources, including:

• Arrays of JSON objects
• OData web services
• DataManager

The Angular Spreadsheet is an interactive component designed for organizing and analyzing data in a tabular format.

Key Capabilities:

• Data Loading: Import Excel/CSV files or load data from local and remote sources including JSON, RESTful services, and OData services.
• Data Export: Export populated data into Excel (xlsx, xls), CSV, and PDF formats.
• Customization: Offers extensive configuration options for tailoring the user interface and behavior.

The ej2-angular-layouts package provides several UI components for structuring application interfaces:

• Angular Card: A small container used to display content in a specific structure.
• Angular Avatar: Used to display images, initials, or icons in various shapes and sizes.
• Angular Splitter: A container component used to construct layouts with multiple and nested resizable panes.
• Angular Timeline: A tool for displaying chronological information, such as user activities or progress tracking.
• Angular Dashboard Layout: A grid-structured layout component for creating dashboards with panels. Panels support resizing, reordering, drag-and-drop, removal, and addition.

The Angular ListView component allows you to select single or multiple items from a list-like interface. It can represent data in interactive hierarchical structures across various layouts and views. Common use cases include data display, data navigation, and data entry.

Key capabilities include:

• Data binding: Bind to local or server-side data sources.
• Grouping: Organize logically related items under categories.
• Nested lists: Display hierarchical data in different layouts.
• Virtualization: Improve performance when handling large datasets by loading only viewable items in the viewport.
• Check list: Display items with checkboxes for single or multiple selection.
• Customizing templates: Customize list items, headers, and category group headers.
• Accessibility: Built-in support for keyboard navigation, screen readers, and other assistive technologies.

The Chat UI component is a lightweight, conversational interface for displaying messages between users.

Key Capabilities:

• Message Suggestions: Uses customizable templates to provide on-demand suggestions for user interaction.
• On-demand Loading: Supports dynamic message loading to optimize performance for long conversations.
• Timebreak: Automatically groups conversations by date using time breaks to improve readability.
• Typing Indicator: Displays real-time typing activity with customizable styles.
• Header Toolbar: Allows adding custom toolbar items to the header for executing commands.
• Customization: Extensive options to customize the appearance of messages, the footer, and other UI elements.

The Angular DropDowns package provides a comprehensive suite of selection and input components. The package includes the following components:

• Angular DropDownList: A standard dropdown list for selecting a single value.
• Angular DropDownTree: A dropdown that displays data in a hierarchical tree structure.
• Angular Mention: An autocomplete-style component used for mentioning users or entities.
• Angular ComboBox: A combination of a textbox and a dropdown list.
• Angular AutoComplete: A textbox with an autocomplete feature for quick selection.
• Angular MultiSelect: A component that allows users to select multiple values from a list.
• Angular ListBox: A component for selecting one or more items from a list.

These components are designed for high performance, responsiveness, and touch-friendly interactions.

The Angular Image Editor is a graphical user interface for image manipulation. Key capabilities include:

• Image Transformations: Rotate, flip, zoom, and crop.
• Annotations: Insert text, rectangles, ellipses, lines, and freehand drawings.
• Finetuning: Adjust brightness, contrast, saturation, hue, exposure, opacity, and blur.
• Filters: Apply presets like Chrome, Warm, Cold, GrayScale, Sepia, and Invert.
• File Handling: Load images and export edited versions in PNG, SVG, and JPG formats.
• Customization: Supports customizable toolbars, various themes (Fluent, Tailwind CSS, Bootstrap 5, Material, High Contrast), RTL, and localization.

The Angular Buttons package provides a suite of interactive UI components for Angular applications, including standard buttons, selection inputs, and specialized action controls.

Included components:

• Angular Button: A custom HTML5 button with support for icons, predefined styles, types, and sizes.
• Angular CheckBox: A checkbox component supporting indeterminate states, custom labels, and various sizes.
• Angular RadioButton: A radio button component for single selection from predefined choices.
• Angular Switch: A toggle component for on/off actions.
• Angular Floating Action Button (FAB): A primary action button that floats above content, supporting various positions and styles.
• Angular Speed Dial: An extension of the FAB that displays a list of action buttons (linear or radial) when clicked.

The AI AssistView component is designed to integrate AI services into web applications. It provides a modern UI for interacting with AI-generated content.

Key Capabilities:

• Built-in Toolbars: Includes predefined items like copy, edit, and like/dislike for interacting with prompts and responses.
• Prompt Suggestions: Supports initial or on-demand prompt suggestions with customizable headers.
• Header Toolbar: Allows adding custom toolbar items to the header for executing specific commands.
• Customization: Supports creating personalized views and customizing the default appearance of prompts and responses.

The Angular FileManager is a graphical user interface for managing file systems. Key capabilities include:

• File and Directory Management: Upload, download, rename, sort, cut, copy, and paste files/folders.
• Multiple Layout Options: Switch between large icons view and details view.
• Multiple File Providers: Supports Amazon S3, MS Azure, NodeJS, Google file systems, and local physical file providers.
• Search & Selection: Built-in search functionality and support for multiple file selection for bulk operations.
• Customizable UI: Includes a customizable toolbar, context menu, and responsive design.
• Access Control & Localization: Define access rules for resources and use the component in various languages and regions.