Home

Awesome

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 70+ 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

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" 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="src/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="src/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="src/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="src/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="src/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="src/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="src/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> </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="src/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="src/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="src/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="src/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="src/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="src/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> </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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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> </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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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> </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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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="src/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> </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="src/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.

Showcase Applications

Support

Product support is available for through following mediums.

License

Check the license detail here.

Changelog

Check the changelog here © Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.