# @syncfusion/ej2-angular-dropdowns

> Essential JS 2 DropDown Components for Angular

Latest version **35.1.43** (published 2026-11-03) · SEE LICENSE IN license license · 0 weekly downloads

## Install

```sh
npm install @syncfusion/ej2-angular-dropdowns
pnpm add @syncfusion/ej2-angular-dropdowns
yarn add @syncfusion/ej2-angular-dropdowns
bun add @syncfusion/ej2-angular-dropdowns
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 35.1.43 |
| Published | 2026-11-03 |
| First published | 2018-09-11 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN license |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 4 |
| Unpacked size | 800.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 294 |
| Author | Syncfusion Inc. |
| Maintainers | syncfusionorg, essentialjs2, syncfusion-javascript |
| Keywords | angular, ng, ng-dropdown, ej2-ng-dropdown, ng-dropdownlist, ng-autocomplete, ng-multiselect, ng-combobox, ng-dropdowntree |

## Links

- npm: https://www.npmjs.com/package/@syncfusion/ej2-angular-dropdowns
- Repository: https://github.com/syncfusion/ej2-angular-ui-components
- Homepage: https://www.syncfusion.com/angular-components
- Issues: https://github.com/syncfusion/ej2-angular-ui-components/issues
- npm.io page: https://npm.io/package/@syncfusion/ej2-angular-dropdowns

## Dependencies (4)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0
- [@syncfusion/ej2-base](https://npm.io/package/@syncfusion/ej2-base.md) ~35.1.37
- [@syncfusion/ej2-dropdowns](https://npm.io/package/@syncfusion/ej2-dropdowns.md) 35.1.43
- [@syncfusion/ej2-angular-base](https://npm.io/package/@syncfusion/ej2-angular-base.md) ~35.1.41

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 35.1.43 (latest) — 2026-11-03
- 34.2.8-ngcc (ngcc) — 2026-09-15
- 29.2.4-850322 (beta) — 2026-07-14
- 35.1.42 — 2026-10-27
- 35.1.41 — 2026-10-20
- 35.1.39 — 2026-10-07
- 35.1.37 — 2026-09-29
- 34.2.8 — 2026-09-15
- 34.2.7 — 2026-09-08
- 34.2.7-ngcc — 2026-09-08
- 34.2.6 — 2026-09-01
- 34.2.6-ngcc — 2026-09-01
- 34.2.5 — 2026-08-25
- 34.2.5-ngcc — 2026-08-25
- 34.2.4 — 2026-08-18
- … 574 more at https://npm.io/package/@syncfusion/ej2-angular-dropdowns/versions

## README

# Syncfusion Angular UI Components Library (Essential JS 2)
 Syncfusion Angular UI Components library has been built from the ground up to be lightweight, responsive, modular and touch friendly. It offers 80+ UI components that every applications will ever need.
 > This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).
> 
> A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
 ## Resources
 * [Getting Started](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli?utm_source=npm&utm_campaign=ej2-angular-ui-components)
* [View Online Demos](https://ej2.syncfusion.com/angular/demos?utm_source=npm&utm_campaign=ej2-angular-ui-components)
* [Product Page](https://www.syncfusion.com/angular-ui-components?utm_source=npm&utm_campaign=ej2-angular-ui-components)
 ## Framework highlights
 ### Lightweight and user friendly
 The entire library is built from scratch to be lightweight and modular. Its footprint can be reduced further by including only the specific components and features your application requires.
 ### Modular architecture
 All components have been built as modules to enable selective referencing, so only the components and features you need are included in your application.
 ### Built for performance
 Performance is critical for delivering a good user experience. We ensure that all our components are designed and built to achieve the best performance possible.
 ### Responsive and touch friendly
 All the components are touch friendly and render adaptively based on the device they are on to provide optimal usage experience on phones, tablets and desktops.
 ### Stunning built-in themes
 Pixel-perfect built-in themes are available in material, bootstrap and fabric design. In addition, it comes with Accessible high-contrast theme and an online tool "[Theme Studio](https://ej2.syncfusion.com/themestudio/)" to customize the provided built-in themes.
 ### Globalization simplified
 Easily build applications to be used by a global audience in various language and culture settings.
 ### Stay current
 With our commitment to at least four major updates per year, you receive the most up-to-date functionality and new components in addition to monthly service packs and bug fixes. Custom patches are available as needed.

 ## Control List

### Grids
<table>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-grid"><b>Data Grid</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-grids"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-grids" title="@syncfusion/ej2-angular-grids" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-grids"><img src="https://ej2.syncfusion.com/badges/ej2-grids/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-grids" title="@syncfusion/ej2-angular-grids" /></a>
       </td>
       <td>
           <a href="components/grids/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/over-view">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/grid/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-pivot-table"><b>Pivot Table</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-pivotview"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-pivotview" title="@syncfusion/ej2-angular-pivotview" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-pivotview"><img src="https://ej2.syncfusion.com/badges/ej2-pivotview/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-pivotview" title="@syncfusion/ej2-angular-pivotview" /></a>
       </td>
       <td>
           <a href="components/pivotview/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pivot-table/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/pivotview/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-spreadsheet"><b>Spreadsheet</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-spreadsheet"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-spreadsheet" title="@syncfusion/ej2-angular-spreadsheet" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-spreadsheet"><img src="https://ej2.syncfusion.com/badges/ej2-spreadsheet/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-spreadsheet" title="@syncfusion/ej2-angular-spreadsheet" /></a>
       </td>
       <td>
           <a href="components/spreadsheet/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/spreadsheet/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/spreadsheet/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-tree-grid"><b>Tree Grid</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-treegrid"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-treegrid" title="@syncfusion/ej2-angular-treegrid" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-treegrid"><img src="https://ej2.syncfusion.com/badges/ej2-treegrid/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-treegrid" title="@syncfusion/ej2-angular-treegrid" /></a>
       </td>
       <td>
           <a href="components/treegrid/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/treegrid-overview">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started/">Documentation</a>
       </td>
   </tr>
</table>

### Editors

<table>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-in-place-editor"><b>In-place Editor</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-inplace-editor"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-inplace-editor" title="@syncfusion/ej2-angular-inplace-editor" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-inplace-editor"><img src="https://ej2.syncfusion.com/badges/ej2-inplace-editor/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-inplace-editor" title="@syncfusion/ej2-angular-inplace-editor" /></a>
       </td>
       <td>
           <a href="components/inplaceeditor/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/inplace-editor/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/inplace-editor/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-wysiwyg-rich-text-editor"><b>Rich Text Editor</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-richtexteditor"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-richtexteditor" title="@syncfusion/ej2-angular-richtexteditor" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-richtexteditor"><img src="https://ej2.syncfusion.com/badges/ej2-richtexteditor/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-richtexteditor" title="@syncfusion/ej2-angular-richtexteditor" /></a>
       </td>
       <td>
           <a href="components/richtexteditor/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/rich-text-editor/tools">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/rich-text-editor/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-word-processor"><b>Word Processor</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-documenteditor"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-documenteditor" title="@syncfusion/ej2-angular-documenteditor" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-documenteditor"><img src="https://ej2.syncfusion.com/badges/ej2-documenteditor/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-documenteditor" title="@syncfusion/ej2-angular-documenteditor" /></a>
       </td>
       <td>
           <a href="components/documenteditor/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/document-editor/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/document-editor/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/rich-text-editor-sdk/angular-block-editor"><b>Block Editor</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-blockeditor"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-blockeditor" title="@syncfusion/ej2-angular-blockeditor" style="height:20px;" /></a>
       </td>
       <td>
           <a href="components/blockeditor/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/block-editor/overview">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/block-editor/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <b>Markdown Editor</b>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-markdowneditor"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-markdowneditor" title="@syncfusion/ej2-angular-markdowneditor" style="height:20px;" /></a>
       </td>
       <td>
           <a href="components/markdowneditor/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/markdown-editor/overview">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/markdown-editor/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <b>Rich Text Editor UI</b>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-richtexteditor-ui"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-richtexteditor-ui" title="@syncfusion/ej2-angular-richtexteditor-ui" style="height:20px;" /></a>
       </td>
       <td>
           <a href="components/richtexteditorui/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/rich-text-editor-ui/overview">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/rich-text-editor-ui/getting-started/">Documentation</a>
       </td>
   </tr>
</table>

### Dropdowns

<table>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-autocomplete"><b>AutoComplete</b></a>
       </td>
       <td rowspan="6">
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-dropdowns"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-dropdowns" title="@syncfusion/ej2-angular-dropdowns" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-dropdowns"><img src="https://ej2.syncfusion.com/badges/ej2-dropdowns/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-dropdowns" title="@syncfusion/ej2-angular-dropdowns" /></a>
       </td>
       <td>
           <a href="components/dropdowns/src/auto-complete">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/auto-complete/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/auto-complete/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-combobox"><b>ComboBox</b></a>
       </td>
       <td>
           <a href="components/dropdowns/src/combo-box">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/combo-box/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/combo-box/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-dropdown-list"><b>Dropdown List</b></a>
       </td>
       <td>
           <a href="components/dropdowns/src/drop-down-list">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/drop-down-list/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/drop-down-list/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-dropdown-tree"><b>Dropdown Tree</b></a>
       </td>
       <td>
           <a href="components/dropdowns/src/drop-down-tree">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/drop-down-tree/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/drop-down-tree/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-listbox"><b>List Box</b></a>
       </td>
       <td>
           <a href="components/dropdowns/src/list-box">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/list-box/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/list-box/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-multiselect-dropdown"><b>MultiSelect Dropdown</b></a>
       </td>
       <td>
           <a href="components/dropdowns/src/multi-select">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/multi-select/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/multi-select/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-components/angular-multicolumn-combobox"><b>MultiColumn ComboBox</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-multicolumn-combobox"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-multicolumn-combobox" title="@syncfusion/ej2-angular-multicolumn-combobox" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-multicolumn-combobox"><img src="https://ej2.syncfusion.com/badges/ej2-multicolumn-combobox/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-multicolumn-combobox" title="@syncfusion/ej2-angular-multicolumn-combobox" /></a>
       </td>
       <td>
           <a href="components/multicolumncombobox/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/multicolumn-combobox/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/multicolumn-combobox/getting-started/">Documentation</a>
       </td>
   </tr>
</table>

### Inputs

<table>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-checkbox"><b>Checkbox</b></a>
       </td>
       <td rowspan="3">
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-buttons"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-buttons" title="@syncfusion/ej2-angular-buttons" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-buttons"><img src="https://ej2.syncfusion.com/badges/ej2-buttons/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-buttons" title="@syncfusion/ej2-angular-buttons" /></a>
       </td>
       <td>
           <a href="components/buttons/src/check-box">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/button/checkbox">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/check-box/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-radio-button"><b>Radio Button</b></a>
       </td>
       <td>
           <a href="components/buttons/src/radio-button">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/button/radio-button">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/radio-button/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-toggle-switch-button"><b>Toggle Switch Button</b></a>
       </td>
       <td>
           <a href="components/buttons/src/switch">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/button/switch">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/switch/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-color-picker"><b>Color Picker</b></a>
       </td>
       <td rowspan="8">
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-inputs"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-inputs" title="@syncfusion/ej2-angular-inputs" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-inputs"><img src="https://ej2.syncfusion.com/badges/ej2-inputs/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-inputs" title="@syncfusion/ej2-angular-inputs" /></a>
       </td>
       <td>
           <a href="components/inputs/src/color-picker">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/color-picker/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/color-picker/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-file-upload"><b>File Upload</b></a>
       </td>
       <td>
           <a href="components/inputs/src/uploader">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/uploader/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/uploader/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-input-mask"><b>Input Mask</b></a>
       </td>
       <td>
           <a href="components/inputs/src/maskedtextbox">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maskedtextbox/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/maskedtextbox/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-numeric-textbox"><b>Numeric Textbox</b></a>
       </td>
       <td>
           <a href="components/inputs/src/numerictextbox">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/numerictextbox/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/numerictextbox/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-range-selector"><b>Range Slider</b></a>
       </td>
       <td>
           <a href="components/inputs/src/slider">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/range-slider/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/range-slider/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-textbox"><b>TextBox</b></a>
       </td>
       <td>
           <a href="components/inputs/src/textbox">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/textboxes/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/textbox/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/Signature"><b>Signature</b></a>
       </td>
       <td>
           <a href="components/inputs/src/signature">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/signature/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/signature/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-components/angular-image-editor"><b>Image Editor</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-image-editor"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-image-editor" title="@syncfusion/ej2-angular-image-editor" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-image-editor"><img src="https://ej2.syncfusion.com/badges/ej2-image-editor/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-image-editor" title="@syncfusion/ej2-angular-image-editor" /></a>
       </td>
       <td>
           <a href="components/imageeditor/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/image-editor/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/image-editor/getting-started/">Documentation</a>
       </td>
   </tr>
</table>

### Data Visualization

<table>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-barcode"><b>Barcode Generator</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-barcode-generator"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-barcode-generator" title="@syncfusion/ej2-angular-barcode-generator" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-barcode-generator"><img src="https://ej2.syncfusion.com/badges/ej2-barcode-generator/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-barcode-generator" title="@syncfusion/ej2-angular-barcode-generator" /></a>
       </td>
       <td>
           <a href="components/barcodegenerator/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/barcode/default-functionalities">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/barcode/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-circular-gauge"><b>Circular Gauge</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-circulargauge"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-circulargauge" title="@syncfusion/ej2-angular-circulargauge" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-circulargauge"><img src="https://ej2.syncfusion.com/badges/ej2-circulargauge/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-circulargauge" title="@syncfusion/ej2-angular-circulargauge" /></a>
       </td>
       <td>
           <a href="components/circulargauge/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/circular-gauge/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/circular-gauge/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-diagram"><b>Diagram</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-diagrams"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-diagrams" title="@syncfusion/ej2-angular-diagrams" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-diagrams"><img src="https://ej2.syncfusion.com/badges/ej2-diagrams/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-diagrams" title="@syncfusion/ej2-angular-diagrams" /></a>
       </td>
       <td>
           <a href="components/diagrams/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/diagram/default-functionalities">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/diagram/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-heatmap-chart"><b>HeatMap Chart</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-heatmap"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-heatmap" title="@syncfusion/ej2-angular-heatmap" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-heatmap"><img src="https://ej2.syncfusion.com/badges/ej2-heatmap/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-heatmap" title="@syncfusion/ej2-angular-heatmap" /></a>
       </td>
       <td>
           <a href="components/heatmap/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/heatmap-chart/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/heatmap-chart/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-kanban-board"><b>Kanban</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-kanban"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-kanban" title="@syncfusion/ej2-angular-kanban" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-kanban"><img src="https://ej2.syncfusion.com/badges/ej2-kanban/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-kanban" title="@syncfusion/ej2-angular-kanban" /></a>
       </td>
       <td>
           <a href="components/kanban/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/kanban/overview">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/kanban/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-linear-gauge"><b>Linear Gauge</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-lineargauge"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-lineargauge" title="@syncfusion/ej2-angular-lineargauge" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-lineargauge"><img src="https://ej2.syncfusion.com/badges/ej2-lineargauge/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-lineargauge" title="@syncfusion/ej2-angular-lineargauge" /></a>
       </td>
       <td>
           <a href="components/lineargauge/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/linear-gauge/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/linear-gauge/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-maps"><b>Maps</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-maps"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-maps" title="@syncfusion/ej2-angular-maps" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-maps"><img src="https://ej2.syncfusion.com/badges/ej2-maps/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-maps" title="@syncfusion/ej2-angular-maps" /></a>
       </td>
       <td>
           <a href="components/maps/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/maps/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-treemap"><b>TreeMap</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-treemap"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-treemap" title="@syncfusion/ej2-angular-treemap" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-treemap"><img src="https://ej2.syncfusion.com/badges/ej2-treemap/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-treemap" title="@syncfusion/ej2-angular-treemap" /></a>
       </td>
       <td>
           <a href="components/treemap/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treemap/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/treemap/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-bullet-chart"><b>Bullet Chart</b></a>
       </td>
       <td rowspan="6">
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-charts"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-charts" title="@syncfusion/ej2-angular-charts" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-charts"><img src="https://ej2.syncfusion.com/badges/ej2-charts/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-charts" title="@syncfusion/ej2-angular-charts" /></a>
       </td>
       <td>
           <a href="components/charts/src/bullet-chart">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/bullet-chart/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/bullet-chart/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-charts"><b>Charts</b></a>
       </td>
       <td>
           <a href="components/charts/src/chart">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/chart/line">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/chart/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-range-selector"><b>Range Selector</b></a>
       </td>
       <td>
           <a href="components/charts/src/range-navigator">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/range-navigator/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/range-navigator/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-smith-chart"><b>Smith Chart</b></a>
       </td>
       <td>
           <a href="components/charts/src/smithchart">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/smith-chart/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/smithchart/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-sparkline"><b>Sparkline Charts</b></a>
       </td>
       <td>
           <a href="components/charts/src/sparkline">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sparkline/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/sparkline/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-stock-chart"><b>Stock Chart</b></a>
       </td>
       <td>
           <a href="components/charts/src/stock-chart">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/stock-chart/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/stock-chart/getting-started/">Documentation</a>
       </td>
   </tr>
</table>

### Calendars

<table>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-calendar"><b>Calendar</b></a>
       </td>
       <td rowspan="5">
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-calendars"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-calendars" title="@syncfusion/ej2-angular-calendars" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-calendars"><img src="https://ej2.syncfusion.com/badges/ej2-calendars/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-calendars" title="@syncfusion/ej2-angular-calendars" /></a>
       </td>
       <td>
           <a href="components/calendars/src/calendar">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/calendar/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/calendar/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-datepicker"><b>DatePicker</b></a>
       </td>
       <td>
           <a href="components/calendars/src/datepicker">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/datepicker/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/datepicker/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-daterangepicker"><b>DateRangePicker</b></a>
       </td>
       <td>
           <a href="components/calendars/src/daterangepicker">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/daterangepicker/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/daterangepicker/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-datetime-picker"><b>DateTime Picker</b></a>
       </td>
       <td>
           <a href="components/calendars/src/datetimepicker">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/datetimepicker/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/datetimepicker/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-timepicker"><b>TimePicker</b></a>
       </td>
       <td>
           <a href="components/calendars/src/timepicker">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/timepicker/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/timepicker/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-gantt-chart"><b>Gantt Chart</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-gantt"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-gantt" title="@syncfusion/ej2-angular-gantt" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-gantt"><img src="https://ej2.syncfusion.com/badges/ej2-gantt/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-gantt" title="@syncfusion/ej2-angular-gantt" /></a>
       </td>
       <td>
           <a href="components/gantt/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/gantt/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-scheduler"><b>Scheduler</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-schedule"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-schedule" title="@syncfusion/ej2-angular-schedule" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-schedule"><img src="https://ej2.syncfusion.com/badges/ej2-schedule/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-schedule" title="@syncfusion/ej2-angular-schedule" /></a>
       </td>
       <td>
           <a href="components/schedule/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/schedule/overview">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/">Documentation</a>
       </td>
   </tr>
</table>

### Navigation

<table>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-accordion"><b>Accordion</b></a>
       </td>
       <td rowspan="9">
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-navigations"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-navigations" title="@syncfusion/ej2-angular-navigations" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-navigations"><img src="https://ej2.syncfusion.com/badges/ej2-navigations/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-navigations" title="@syncfusion/ej2-angular-navigations" /></a>
       </td>
       <td>
           <a href="components/navigations/src/accordion">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/accordion/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/accordion/getting-started/">Documentation</a>
       </td>
   </tr>
    <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/breadcrumb"><b>Breadcrumb</b></a>
       </td>
       <td>
           <a href="components/navigations/src/breadcrumb">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/breadcrumb/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/breadcrumb/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/carousel"><b>Carousel</b></a>
       </td>
       <td>
           <a href="components/navigations/src/carousel">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/carousel/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/carousel/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-context-menu"><b>Context Menu</b></a>
       </td>
       <td>
           <a href="components/navigations/src/context-menu">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/context-menu/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/context-menu/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-menu-bar"><b>Menu Bar</b></a>
       </td>
       <td>
           <a href="components/navigations/src/menu">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/menu/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/menu/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-sidebar"><b>Sidebar</b></a>
       </td>
       <td>
           <a href="components/navigations/src/sidebar">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-tabs"><b>Tabs</b></a>
       </td>
       <td>
           <a href="components/navigations/src/tab">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/tab/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/tab/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-toolbar"><b>Toolbar</b></a>
       </td>
       <td>
           <a href="components/navigations/src/toolbar">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/toolbar/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/toolbar/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-treeview"><b>TreeView</b></a>
       </td>
       <td>
           <a href="components/navigations/src/treeview">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treeview/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/treeview/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-file-manager"><b>File Manager</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-filemanager"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-filemanager" title="@syncfusion/ej2-angular-filemanager" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-filemanager"><img src="https://ej2.syncfusion.com/badges/ej2-filemanager/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-filemanager" title="@syncfusion/ej2-angular-filemanager" /></a>
       </td>
       <td>
           <a href="components/filemanager/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/file-manager/overview">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/file-manager/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-components/angular-ribbon"><b>Ribbon</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-ribbon"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-ribbon" title="@syncfusion/ej2-angular-ribbon" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-ribbon"><img src="https://ej2.syncfusion.com/badges/ej2-ribbon/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-ribbon" title="@syncfusion/ej2-angular-ribbon" /></a>
       </td>
       <td>
           <a href="components/ribbon/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/ribbon/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/ribbon/getting-started">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <b>Workflow Designer</b>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-workflow-designer"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-workflow-designer" title="@syncfusion/ej2-angular-workflow-designer" style="height:20px;" /></a>
       </td>
       <td>
           <a href="components/workflowdesigner/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/workflow-designer/overview">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/workflow-designer/getting-started/">Documentation</a>
       </td>
   </tr>
</table>

### Buttons

<table>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-button"><b>Button</b></a>
       </td>
       <td rowspan="2">
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-buttons"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-buttons" title="@syncfusion/ej2-angular-buttons" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-buttons"><img src="https://ej2.syncfusion.com/badges/ej2-buttons/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-buttons" title="@syncfusion/ej2-angular-buttons" /></a>
       </td>
       <td>
           <a href="components/buttons/src/button">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/button/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/button/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-chips"><b>Chips</b></a>
       </td>
       <td>
           <a href="components/buttons/src/chips">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/chips/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/chips/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-button-group"><b>Button Group</b></a>
       </td>
       <td rowspan="4">
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-splitbuttons"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-splitbuttons" title="@syncfusion/ej2-angular-splitbuttons" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-splitbuttons"><img src="https://ej2.syncfusion.com/badges/ej2-splitbuttons/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-splitbuttons" title="@syncfusion/ej2-angular-splitbuttons" /></a>
       </td>
       <td>
           <a href="components/splitbuttons/src/button-group">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/button/button-group">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/button-group/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-dropdown-menu"><b>Dropdown Menu</b></a>
       </td>
       <td>
           <a href="components/splitbuttons/src/drop-down-button">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/button/dropdown-button">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/drop-down-button/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-progress-button"><b>Progress Button</b></a>
       </td>
       <td>
           <a href="components/splitbuttons/src/progress-button">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/button/progress-button">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/progress-button/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-split-button"><b>Split Button</b></a>
       </td>
       <td>
           <a href="components/splitbuttons/src/split-button">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/button/split-button">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/split-button/getting-started/">Documentation</a>
       </td>
   </tr>
</table>

### Layout

<table>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-avatar"><b>Avatar</b></a>
       </td>
       <td rowspan="4">
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-layouts"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-layouts" title="@syncfusion/ej2-angular-layouts" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-layouts"><img src="https://ej2.syncfusion.com/badges/ej2-layouts/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-layouts" title="@syncfusion/ej2-angular-layouts" /></a>
       </td>
       <td>
           <a href="src/layouts/styles/avatar">Styles</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/avatar/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/avatar/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-card"><b>Card</b></a>
       </td>
       <td>
           <a href="src/layouts/styles/card">Styles</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/card/basic">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/card/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-dashboard-layout"><b>Dashboard Layout</b></a>
       </td>
       <td>
           <a href="components/layouts/src/dashboard-layout">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/dashboard-layout/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/dashboard-layout/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-splitter"><b>Splitter</b></a>
       </td>
       <td>
           <a href="components/layouts/src/splitter">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/splitter/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/splitter/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-modal-dialog"><b>Dialog</b></a>
       </td>
       <td rowspan="2">
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-popups"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-popups" title="@syncfusion/ej2-angular-popups" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-popups"><img src="https://ej2.syncfusion.com/badges/ej2-popups/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-popups" title="@syncfusion/ej2-angular-popups" /></a>
       </td>
       <td>
           <a href="components/popups/src/dialog">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/dialog/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/dialog/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-tooltip"><b>Tooltip</b></a>
       </td>
       <td>
           <a href="components/popups/src/tooltip">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/tooltip/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/tooltip/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-listview"><b>ListView</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-lists"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-lists" title="@syncfusion/ej2-angular-lists" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-lists"><img src="https://ej2.syncfusion.com/badges/ej2-lists/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-lists" title="@syncfusion/ej2-angular-lists" /></a>
       </td>
       <td>
           <a href="components/lists/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/listview/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/listview/getting-started/">Documentation</a>
       </td>
   </tr>
</table>

### Notification

<table>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-badge"><b>Badge</b></a>
       </td>
       <td rowspan="2">
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-notifications"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-notifications" title="@syncfusion/ej2-angular-notifications" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-notifications"><img src="https://ej2.syncfusion.com/badges/ej2-notifications/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-notifications" title="@syncfusion/ej2-angular-notifications" /></a>
       </td>
       <td>
           <a href="src/notifications/styles/badge">Styles</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/badge/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/badge/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-toast"><b>Toast</b></a>
       </td>
       <td>
           <a href="components/notifications/src/toast">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/toast/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/toast/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-progressbar"><b>Progress Bar</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-progressbar"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-progressbar" title="@syncfusion/ej2-angular-progressbar" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-progressbar"><img src="https://ej2.syncfusion.com/badges/ej2-progressbar/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-progressbar" title="@syncfusion/ej2-angular-progressbar" /></a>
       </td>
       <td>
           <a href="components/progressbar/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/progress-bar/Linear">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/progress-bar/getting-started/">Documentation</a>
       </td>
   </tr>
</table>

### Forms

<table>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-query-builder"><b>Query Builder UI</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-querybuilder"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-querybuilder" title="@syncfusion/ej2-angular-querybuilder" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-querybuilder"><img src="https://ej2.syncfusion.com/badges/ej2-querybuilder/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-querybuilder" title="@syncfusion/ej2-angular-querybuilder" /></a>
       </td>
       <td>
           <a href="components/querybuilder/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/query-builder/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/query-builder/getting-started/">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <b>Form Builder</b>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-form-builder"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-form-builder" title="@syncfusion/ej2-angular-form-builder" style="height:20px;" /></a>
       </td>
       <td>
           <a href="components/formbuilder/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/form-builder/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/form-builder/getting-started">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <b>Form Renderer</b>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-form-renderer"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-form-renderer" title="@syncfusion/ej2-angular-form-renderer" style="height:20px;" /></a>
       </td>
       <td>
           <a href="components/formrenderer/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/form-renderer/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/form-renderer/getting-started/">Documentation</a>
       </td>
   </tr>
</table>

### Interactive Chat

<table>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-controls/angular-ai-assistview"><b>AI AssistView</b></a>
       </td>
       <td rowspan="2">
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-interactive-chat"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-interactive-chat" title="@syncfusion/ej2-angular-interactive-chat" style="height:20px;" /></a>
       </td>
       <td>
           <a href="components/interactivechat/src/ai-assistview">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/ai-assistview/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/ai-assistview/getting-started">Documentation</a>
       </td>
   </tr>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-controls/angular-chat-ui"><b>Chat UI</b></a>
       </td>
       <td>
           <a href="components/interactivechat/src/chat-ui">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/chat-ui/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/chat-ui/getting-started">Documentation</a>
       </td>
   </tr>
</table>

### Viewer

<table>
   <tr>
       <td>
           <a href="https://www.syncfusion.com/angular-ui-components/angular-pdf-viewer"><b>PDF Viewer</b></a>
       </td>
       <td>
           <a href="https://www.npmjs.com/package/@syncfusion/ej2-angular-pdfviewer"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-angular-pdfviewer" title="@syncfusion/ej2-angular-pdfviewer" style="height:20px;" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-pdfviewer"><img src="https://ej2.syncfusion.com/badges/ej2-pdfviewer/coverage.svg" alt="code coverage of @syncfusion/ej2-angular-pdfviewer" title="@syncfusion/ej2-angular-pdfviewer" /></a>
       </td>
       <td>
           <a href="components/pdfviewer/src">Source</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/demos/#/bootstrap5/pdfviewer/default">Live demo</a>
       </td>
       <td>
           <a href="https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started/">Documentation</a>
       </td>
   </tr>
</table>
 
 ## Supported Frameworks
 The Syncfusion Essential JS 2 is also offered in following list of frameworks.
 * [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_campaign=ej2-angular-ui-components)
* [React](https://www.syncfusion.com/react-ui-components?utm_source=npm&utm_campaign=ej2-angular-ui-components)
* [Vue.js](https://www.syncfusion.com/vue-ui-components?utm_source=npm&utm_campaign=ej2-angular-ui-components)
* [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_campaign=ej2-angular-ui-components)
* [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_campaign=ej2-angular-ui-components)
 ## Showcase Applications
 * [Diagram Builder](https://ej2.syncfusion.com/showcase/angular/diagrambuilder?utm_source=npm&utm_campaign=ej2-angular-ui-components)
* [Expense Tracker](https://ej2.syncfusion.com/showcase/angular/expensetracker?utm_source=npm&utm_campaign=ej2-angular-ui-components)
* [Loan Calculator](https://ej2.syncfusion.com/showcase/angular/loancalculator?utm_source=npm&utm_campaign=ej2-angular-ui-components)
* [Stock Chart](https://ej2.syncfusion.com/showcase/angular/stockchart?utm_source=npm&utm_campaign=ej2-angular-ui-components)
* [Web Mail](https://ej2.syncfusion.com/showcase/angular/webmail?utm_source=npm&utm_campaign=ej2-angular-ui-components)
 ## Support
 Product support is available for through following mediums.
 * Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=ej2-angular-ui-components) support system or [Community forum](https://www.syncfusion.com/forums/angular-js2?utm_source=npm&utm_campaign=ej2-angular-ui-components).
* New [GitHub issue](https://github.com/syncfusion/ej2-angular-ui-components/issues/new).
* Ask your query in [Stack Overflow](https://stackoverflow.com/) with tag `syncfusion` and `ej2`.
 ## License
 Check the license detail [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/license).
 ## Changelog
 Check the changelog [here](https://ej2.syncfusion.com/angular/documentation/release-notes/index/?utm_source=npm&utm_campaign=ej2-angular-ui-components)
     © Copyright 2026 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.
    The Syncfusion Essential Studio license and copyright applies to this distribution.

---
_Source: https://npm.io/package/@syncfusion/ej2-angular-dropdowns · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._