Note: This list may not be complete. No component, listed or unlisted, may be used outside of
the technology in which it is released. The usage decision for a component is found in the Decision
and Decision Constraints.
BUTTONS - Button
|
The React Button is a custom Hypertext Markup Language 5 (HTML5) button component. |
BUTTONS - Button Group
|
The React Button Group is a series of buttons aligned vertically or horizontally. |
BUTTONS - Chips
|
The React Chips is a component that provides small blocks of text information. Chips can also contain avatars, images, letters, and close icons. |
BUTTONS - Dropdown Menu
|
The React Dropdown Menu is a graphical user interface component that lets users choose from a list of actions that can be triggered. |
BUTTONS - Floating Action Button (FAB)
|
The React Floating Action Button (FAB) is an extension of React Button that appears in front of all the contents of the screens and performs the primary action. |
BUTTONS - Progress Button
|
The React Progress Button or spinner button is a graphical user interface component used to visualize the progression of an operation in the background. |
BUTTONS - Speed Dial
|
The React Speed Dial component is an extension of the React Floating Action Button that displays a list of action buttons when clicked. It displays action buttons in linear and radial directions. |
BUTTONS - Split Button |
The React Split Button triggers a default action when the primary button is clicked and provides a list of actions when the drop-down button is clicked. |
CALENDARS - Calendar
|
The Angular Calendar is a component to display the date and days of the week. |
CALENDARS - DatePicker
|
The Angular DatePicker is a component that allows end users to enter or select a date value. |
CALENDARS - DateRangePicker
|
The Angular Date Range Picker is a component that allows end users to select start and end date values as a range from a calendar pop-up or by entering values directly in the Hypertext Markup Language (HTML) input text box. |
CALENDARS - DateTime Picker
|
The Angular DateTime Picker is a component that allows end users to enter or select date and time values from a pop-up calendar and drop-down time list. |
CALENDARS - Gantt Chart
|
The Angular Gantt Chart is a project planning and management tool used to display and manage hierarchical tasks with timeline details. |
CALENDARS - Scheduler
|
The Angular Scheduler, or event calendar, is an event calendar component that helps users manage their time efficiently. |
CALENDARS - TimePicker
|
The Angular TimePicker is a component that allows end users to manually enter time or select time values from a drop-down time list. |
DATA VISUALIZATION - Barcode Generator
|
The Angular Quick Response (QR) Code (Barcode) generator component is a component that displays industry-standard one dimensional and two dimensional barcodes in Angular technologies. |
DATA VISUALIZATION - Bullet Chart
|
The Angular Bullet Chart is used to visually compare measures, like the commonly used bar chart. The bullet chart displays one or more measures and compares them with a target value. |
DATA VISUALIZATION - Charts
|
Angular Charts is a component for visualizing data in both mobile and web programs. |
DATA VISUALIZATION - Circular Gauge
|
The Angular Circular Gauge is a component for visualizing numeric values on a circular scale with features like multiple axes and rounded corners.
|
DATA VISUALIZATION - Diagram
|
The Angular Diagram is an architecture diagram library for visualizing, creating, and editing interactive diagrams. |
DATA VISUALIZATION - HeatMap Chart
|
The Angular Dropdown Tree component is a textbox component that allows the user to select single or multiple values from hierarchical data in a tree-like structure. |
DATA VISUALIZATION - Kanban
|
The Angular Kanban board is a task scheduling control that provides user interface representation to manage multiple stages of work. The Kanban board is used in features such as task scheduler, project management, software or product development, manufacturing process, and personal task management. |
DATA VISUALIZATION - Linear Gauge
|
The Angular Linear Gauge is a control for visualizing numeric values in a linear scale with features like multiple axes, and different orientations. |
DATA VISUALIZATION - Maps
|
The Angular Maps component is ideal for rendering maps from Geo-JavaScript Object Notation(GeoJSON) data or other map providers.
|
DATA VISUALIZATION - Range Selector
|
Angular Range Selector is an interface for selecting a small range from a larger collection. |
DATA VISUALIZATION - Smith Chart
|
The Angular Smith Chart is a control for showing the parameters of transmission lines in high-frequency circuit features. |
DATA VISUALIZATION - Sparkline Charts
|
The Angular Sparkline Charts is a replacement for normal charts to display trends in a very small area. |
DATA VISUALIZATION - Stock Charts
|
Angular Stock Chart is a financial charting package. |
DATA VISUALIZATION - TreeMap
|
The Angular TreeMap is a component used to visualize both hierarchical and flat data. |
DROPDOWNS - AutoComplete
|
The Angular AutoComplete is a textbox component that provides a list of suggestions to select from as the user types. |
DROPDOWNS - ComboBox
|
The Angular ComboBox component is a drop-down list with editable textbox that also allows users to choose an option from a predefined pop-up list. |
DROPDOWNS - Dropdown List
|
The Angular Dropdown List is a quick replacement of the Hypertext Markup Language (HTML) select tags. |
DROPDOWNS - Dropdown Tree
|
The Angular Dropdown Tree component contains a hierarchical structure list of pre-defined values from that the user can choose a single value. |
DROPDOWNS - ListBox
|
The Angular ListBox is a graphical user interface for displaying a list of items with multi-selection options. |
DROPDOWNS - Mention
|
The Angular Mention is an autocomplete-like component that populates mentions or hashtags.
|
DROPDOWNS - MultiSelect Dropdown
|
The Angular Multi Select Dropdown is a quick replacement for the Hypertext Markup Language (HTML) select tag for selecting multiple values. |
FILE VIEWERS & EDITORS - Image Editor
|
The Angular Image Editor component is a graphical user interface used for editing images. |
FILE VIEWERS & EDITORS - In-place Editor
|
The Angular In-Place Editor component is used for editing a value dynamically within its context (in-place). |
FILE VIEWERS & EDITORS - Portable Document Format (PDF) Viewer
|
The Angular Portable Document Format (PDF) Viewer is a component for viewing and printing PDF files. |
FILE VIEWERS & EDITORS - Rich Text Editor
|
The Angular Rich Text Editor is a what you see is what you get (WYSIWYG) Hypertext Markup Language (HTML) editor and WYSIWYG Markdown editor. The Rich Text Editor is used to create blogs, forum posts, notes sections, support tickets (incidents), comment sections, and messaging programs. |
FILE VIEWERS & EDITORS - Word Processor
|
The Angular Word Processor is a user interface (UI) component with editing capabilities like Microsoft Word. Also known as the document editor, this component is used to create, edit, view, and print Word documents. |
FORMS - Form Validation
|
Angular Form Validator can be used to validate the form input elements with the required validation rules. |
FORMS - Query Builder
|
The Angular Query Builder is a user interface (UI) for filtering large amounts of data by creating or editing conditions that can be combined with data visualization controls like DataGrid and Charts to view the filtered data. |
GRIDS - DataGrid
|
The Angular DataGrid is displays data in a tabular format. |
GRIDS - Pivot Table
|
Angular Pivot Table is used to organize and summarize business data and display the result in a cross-table format. |
GRIDS - Spreadsheets
|
The Angular Spreadsheet, also known as the React Excel viewer, is used for organizing and analyzing data in tabular format like Microsoft Excel for web program. |
GRIDS - Tree Grid
|
The Angular TreeGrid is used to visualize self-referential, hierarchical data effectively in a tabular format (a tree-like structure). |
INPUTS - Checkbox
|
The Angular Checkbox is a custom checkbox-type Hypertext Markup Language 5 (HTML5) input component for selecting one or more options from a list of predefined choices. |
INPUTS - Color Picker
|
The Angular Color Picker component allows the user to pick colors either by selecting from the color picker container or by adjusting the hue and opacity. |
INPUTS - File Upload
|
The Angular File Upload is a component for uploading one or multiple files, images, documents, audio, video, and other files to a server. |
INPUTS - Input Mask
|
The Angular Input Mask or masked textbox is a component that provides an easy and reliable way to collect user input based on a standard mask. |
INPUTS - Numeric TextBox
|
The Angular Numeric Textbox component is a component used to get number inputs from users. |
INPUTS - Radio Button
|
The Angular Radio Button is a custom radio-type Hypertext Markup Language 5 (HTML5) input component for selecting one option from a list of predefined choices. |
INPUTS - Signature
|
The Angular Signature Pad is a graphical interface that allows users to draw smooth signatures as vector outline strokes using variable-width Bezier curve interpolation. |
INPUTS - Slider
|
The Angular Range Slider is a custom range-type Hypertext Markup Language 5 (HTML5) input component. It allows the user to select a value or range of values between a specified minimum and maximum. |
INPUTS - TextBox
|
The Angular TextBox (text field) is a component for editing, displaying, or entering plain text on forms to capture user names, phone numbers, and email. This component is an extended version of the Hypertext Markup Language 5 (HTML5) TextBox (input type text) component with icons, floating labels, different sizing, grouping, and validation states. |
INPUTS - Toggle Switch Button
|
The Angular Toggle Switch Button component is a custom Hypertext Markup Language 5 (HTML5) input-type checkbox component that allows the user to perform a toggle (on/off) action between checked and unchecked states. |
LAYOUT - Avatar
|
Angular Avatar is a Cascading Style Sheets (CSS) component used to add initials, icons, or images representing people or objects in different shapes and sizes. The Avatar control can integrate with ListView, Badge, Card, and other container components. |
LAYOUT - Card
|
Angular Card is a container-based user interface (UI) component built using Hypertext Markup Language 5 (HTML5)/Cascading Style Sheets 3 (CSS3) markup and styles for displaying organized content. |
LAYOUT - Dashboard Layout
|
Angular Dashboard Layout is a grid-structured layout component that helps create static and dynamic dashboard layouts with panels. |
LAYOUT - Dialog
|
The Angular Dialog is a useful user interface (UI) component for informing users about critical information, errors, warnings, and questions, as well as confirming decisions and collecting input from users.
|
LAYOUT - ListView
|
The Angular ListView component is a list-like interface that allows the user to select an item or multiple items. |
LAYOUT - Predefined Dialogs
|
The Angular Predefined Dialogs are used to display messages and collect user input within a web page. |
LAYOUT - Splitter
|
The Angular Splitter is a layout user interface (UI) that provides resizable, expandable, collapsible, and nestable panes. |
LAYOUT - Tooltip
|
The Angular Tooltip component is a pop-up that shows information or a message when users hover, click, focus, or touch an image, button, and anchor tag. |
NAVIGATION - Accordion
|
The Angular Accordion is a container-based component with vertically collapsible panels (vertical accordion) and stacked headers that expand or collapse one or more panels at a time within the available space. |
NAVIGATION - AppBar
|
The Angular AppBar also known as action bar or nav bar displays information and actions related to the current program screen.
|
NAVIGATION - Breadcrumb
|
The Angular Breadcrumb is a graphical user interface that serves as a navigation header for the user`s web program or site. |
NAVIGATION - Carousel
|
The Angular Carousel component allows users to display images with content and links like a slide show. |
NAVIGATION - Context Menu
|
The Angular Context Menu or right-click menu is a graphical user interface component that appears when the user right-clicks or performs a touch and hold action. |
NAVIGATION - File Manager
|
The Angular File Manager (File explorer) is a graphical user interface component for managing the file system that allows users to perform most common file operations like accessing, editing, and sorting files or folders. |
NAVIGATION - Menu Bar
|
The Angular Menu Bar is a graphical user interface component that serves as a navigation header for the user`s web program or site. |
NAVIGATION - Sidebar
|
The Angular Sidebar component is an expandable container area that holds primary and secondary information placed alongside the main content of a webpage. |
NAVIGATION - Tabs
|
The Angular Tabs component is a user interface (tabs UI) for organizing related content and occupying space.
|
NAVIGATION - Toolbar
|
The Angular Toolbar is a component that provides an interface for selecting a command from a selection of commands. |
NAVIGATION - TreeView
|
The Angular Tree View is a graphical user interface component that to represents hierarchical data in a tree structure. |
NOTIFICATIONS - Badge
|
The Badge is a Cascading Style Sheets (CSS) component used to add notifications, messages, or statuses in different shapes and sizes. The Badge component can be easily integrated with ListView, Avatar, and other container controls. |
NOTIFICATIONS - Message
|
The Angular Message is a graphical user interface for displaying messages with visual severity levels. |
NOTIFICATIONS - Progress Bar
|
The Angular Progress Bar is a control that indicates the progress of a task with customizable visuals. |
NOTIFICATIONS - Skeleton
|
The Angular Skeleton is a placeholder that animates a shimmer effect to let users know that the page`s content is currently loading. |
NOTIFICATIONS - Toast
|
The Angular Toast or Toasty is a small, nonblocking notification pop-up. A toast is shown to users with readable message content at the bottom of the screen or at a specific target and disappears automatically after a few seconds (time-out) with different animation effects. |