jqwidgets-ng

jQWidgets for Angular - Angular UI components: an Angular data grid, scheduler, Gantt chart, pivot grid, tree grid, 30+ chart types, editors, date and number inputs, drop-downs, menus, tabs, docking and layout - 82 standalone Angular components with 40 themes, for Angular 19 and later. Every component is also exported from an NgModule, one entry point per widget.

Angular demos · Documentation · License & pricing

jQWidgets is commercial software. See Licensing.

Requirements

Angular 19 or later (@angular/core, @angular/common and @angular/forms). The components are published as partial-Ivy output, so a newer Angular links them without a rebuild.

Installation

npm install jqwidgets-ng

Then add the base stylesheet and one theme to your project, in angular.json:

"styles": [
    "node_modules/jqwidgets-ng/jqwidgets/styles/jqx.base.css",
    "node_modules/jqwidgets-ng/jqwidgets/styles/jqx.material.css",
    "src/styles.css"
]

ng add jqwidgets-ng does the same and lets you pick the theme. The package carries the jQWidgets runtime in its jqwidgets/ folder and each component imports what it needs, so there is nothing else to load.

Usage

Import the component from its own entry point, jqwidgets-ng/<widget>:

import { Component } from '@angular/core';
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';

@Component({
    selector: 'app-root',
    imports: [jqxGridComponent],
    template: `<jqxGrid theme="material" [width]="500" [source]="source" [columns]="columns"></jqxGrid>`
})
export class AppComponent {
    source: any = {
        datatype: 'array',
        localdata: [{ name: 'Nancy', title: 'Sales Representative' }, { name: 'Andrew', title: 'Vice President' }],
        datafields: [{ name: 'name', type: 'string' }, { name: 'title', type: 'string' }]
    };
    columns: any[] = [{ text: 'Name', datafield: 'name' }, { text: 'Title', datafield: 'title' }];
}

In an NgModule-based application import the module instead:

import { jqxGridModule } from 'jqwidgets-ng/jqxgrid';

@NgModule({ imports: [BrowserModule, jqxGridModule], /* ... */ })
export class AppModule {}

Options, events and methods

Every widget option is an input with the option's name, every widget event is an output prefixed with on, and every method is a method of the component - reached through a template reference:

<jqxGrid #grid [source]="source" [columns]="columns" [selectionmode]="'singlerow'"
         (onRowselect)="onRowSelect($event)"></jqxGrid>
<jqxButton (onClick)="grid.selectrow(2)">Select the third row</jqxButton>

import { ViewChild } from '@angular/core';
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
import { jqxButtonComponent } from 'jqwidgets-ng/jqxbuttons';   // both go in the component's imports

@ViewChild('grid') grid!: jqxGridComponent;

onRowSelect(event: any): void {
    console.log(event.args.rowindex);
}

The option, event and method names are those of the jQWidgets API, so the documentation of each widget applies as written. Options are typed against the jqwidgets namespace in the bundled jqwidgets.d.ts.

Creating a widget later

Set [auto-create]="false" to keep the component from initialising on view init, then call createComponent(options) yourself - useful when the options depend on data that arrives after the view renders.

Components

One convention throughout: the widget jqxGrid is imported from jqwidgets-ng/jqxgrid, its standalone component is jqxGridComponent, its NgModule jqxGridModule, its selector <jqxGrid>, and its options, events and methods are the ones on the widget's documentation page. The table below is generated from the package, so every entry point in it exists and every name is spelled as the code spells it.

| Widget | What it does | Import from | Component | NgModule | Selector | Demos | |---|---|---|---|---|---|---| | jqxBarcode | Barcodes encodes value in a specific pattern. | jqwidgets-ng/jqxbarcode | jqxBarcodeComponent | jqxBarcodeModule | <jqxBarcode> | Angular · jQuery | | jqxBarGauge | Displays multiple values in a circular graph. | jqwidgets-ng/jqxbargauge | jqxBarGaugeComponent | jqxBarGaugeModule | <jqxBarGauge> | Angular · jQuery | | jqxBulletChart | Features two measures - a primary one (the pointer) and a comparative one (the target) and displays them in the context of a number of... | jqwidgets-ng/jqxbulletchart | jqxBulletChartComponent | jqxBulletChartModule | <jqxBulletChart> | Angular · jQuery | | jqxButtonGroup | Enables the creation of groups of buttons. | jqwidgets-ng/jqxbuttongroup | jqxButtonGroupComponent | jqxButtonGroupModule | <jqxButtonGroup> | jQuery | | jqxButton | Displays a simple button. | jqwidgets-ng/jqxbuttons | jqxButtonComponent | jqxButtonModule | <jqxButton> | Angular · jQuery | | jqxCalendar | Enables the user to select a date using a visual monthly calendar display. | jqwidgets-ng/jqxcalendar | jqxCalendarComponent | jqxCalendarModule | <jqxCalendar> | Angular · jQuery | | jqxChart | Displays Lightweight and powerful chart widget written 100% in javascript. | jqwidgets-ng/jqxchart | jqxChartComponent | jqxChartModule | <jqxChart> | Angular · jQuery | | jqxChat | Embeds an AI assistant chat into a web application. | jqwidgets-ng/jqxchat | jqxChatComponent | jqxChatModule | <jqxChat> | Angular · jQuery | | jqxCheckBox | Displays a check box that allows the end-user to select a true, false or indeterminate condition. | jqwidgets-ng/jqxcheckbox | jqxCheckBoxComponent | jqxCheckBoxModule | <jqxCheckBox> | jQuery | | jqxCheckBoxGroup | Displays a check box group of items. | jqwidgets-ng/jqxcheckboxgroup | jqxCheckBoxGroupComponent | jqxCheckBoxGroupModule | <jqxCheckBoxGroup> | Angular · jQuery | | jqxColorPicker | Enables the user to easily pick a color. | jqwidgets-ng/jqxcolorpicker | jqxColorPickerComponent | jqxColorPickerModule | <jqxColorPicker> | Angular · jQuery | | jqxComboBox | Enables the user to easily pick an item from a list of selectable items displayed in a drop-down. | jqwidgets-ng/jqxcombobox | jqxComboBoxComponent | jqxComboBoxModule | <jqxComboBox> | Angular · jQuery | | jqxComplexInput | Enables the user to edit complex and scientific numbers. | jqwidgets-ng/jqxcomplexinput | jqxComplexInputComponent | jqxComplexInputModule | <jqxComplexInput> | Angular · jQuery | | jqxDataTable | Displays a table of data and allows the user to sort, filter or edit it. | jqwidgets-ng/jqxdatatable | jqxDataTableComponent | jqxDataTableModule | <jqxDataTable> | Angular · jQuery | | jqxDateTimeInput | Enables the user to easily pick a date or time from an input or calendar displays in a drop-down. | jqwidgets-ng/jqxdatetimeinput | jqxDateTimeInputComponent | jqxDateTimeInputModule | <jqxDateTimeInput> | Angular · jQuery | | jqxDocking | Enables the user to add windows and change their layout. | jqwidgets-ng/jqxdocking | jqxDockingComponent | jqxDockingModule | <jqxDocking> | Angular · jQuery | | jqxDockingLayout | Enables the creation of complex layouts with panels that can be floated, docked, nested, resized, pinned, unpinned and closed. | jqwidgets-ng/jqxdockinglayout | jqxDockingLayoutComponent | jqxDockingLayoutModule | <jqxDockingLayout> | Angular · jQuery | | jqxDockPanel | Allows the creation of dock layouts. | jqwidgets-ng/jqxdockpanel | jqxDockPanelComponent | jqxDockPanelModule | <jqxDockPanel> | Angular · jQuery | | jqxDragDrop | Enables the user to easily drag and drop items. | jqwidgets-ng/jqxdragdrop | jqxDragDropComponent | jqxDragDropModule | <jqxDragDrop> | Angular · jQuery | | jqxDraw | Drawing SVG, HTML5 and VML programming interface. | jqwidgets-ng/jqxdraw | jqxDrawComponent | jqxDrawModule | <jqxDraw> | Angular · jQuery | | jqxDropDownButton | Contains a custom content displayed in a drop-down. | jqwidgets-ng/jqxdropdownbutton | jqxDropDownButtonComponent | jqxDropDownButtonModule | <jqxDropDownButton> | jQuery | | jqxDropDownList | Contains a list of selectable items displayed in a drop-down. | jqwidgets-ng/jqxdropdownlist | jqxDropDownListComponent | jqxDropDownListModule | <jqxDropDownList> | Angular · jQuery | | jqxEditor | Represents a ready-for-use HTML text editor which can simplify web content creation or be a replacement of your HTML Text Areas. | jqwidgets-ng/jqxeditor | jqxEditorComponent | jqxEditorModule | <jqxEditor> | Angular · jQuery | | jqxExpander | Displays header and content sections(like tabs). | jqwidgets-ng/jqxexpander | jqxExpanderComponent | jqxExpanderModule | <jqxExpander> | Angular · jQuery | | jqxFileUpload | Enables users to select files and upload them to a server. | jqwidgets-ng/jqxfileupload | jqxFileUploadComponent | jqxFileUploadModule | <jqxFileUpload> | Angular · jQuery | | jqxForm | Form component displaying one or more input elements. | jqwidgets-ng/jqxform | jqxFormComponent | jqxFormModule | <jqxForm> | Angular · jQuery | | jqxFormattedInput | Enables users to format numbers in various numeric formats. | jqwidgets-ng/jqxformattedinput | jqxFormattedInputComponent | jqxFormattedInputModule | <jqxFormattedInput> | Angular · jQuery | | jqxGantt | Enables users to create easily Gantt charts | jqwidgets-ng/jqxgantt | jqxGanttComponent | jqxGanttModule | <jqxGantt> | Angular · jQuery | | jqxGauge | Displays an indicator within a range of values. | jqwidgets-ng/jqxgauge | jqxGaugeComponent | jqxGaugeModule | <jqxGauge> | Angular · jQuery | | jqxGrid | Enables users to display tabular data. | jqwidgets-ng/jqxgrid | jqxGridComponent | jqxGridModule | <jqxGrid> | Angular · jQuery | | jqxHeatMap | Displays a heatmap. | jqwidgets-ng/jqxheatmap | jqxHeatMapComponent | jqxHeatMapModule | <jqxHeatMap> | Angular · jQuery | | jqxInput | Represents an Input with auto-complete capabilities. | jqwidgets-ng/jqxinput | jqxInputComponent | jqxInputModule | <jqxInput> | Angular · jQuery | | jqxKanban | Can be used to implement the kanban method for a project. | jqwidgets-ng/jqxkanban | jqxKanbanComponent | jqxKanbanModule | <jqxKanban> | Angular · jQuery | | jqxKnob | Displays a graph with round shape which displays a draggable indicator within a range of values. | jqwidgets-ng/jqxknob | jqxKnobComponent | jqxKnobModule | <jqxKnob> | Angular · jQuery | | jqxLayout | Allows the creation of complex layouts with panels that can be nested, resized, pinned, unpinned and closed. | jqwidgets-ng/jqxlayout | jqxLayoutComponent | jqxLayoutModule | <jqxLayout> | Angular · jQuery | | jqxLinearGauge | Displays a linear gauge. | jqwidgets-ng/jqxlineargauge | jqxLinearGaugeComponent | jqxLinearGaugeModule | <jqxLinearGauge> | jQuery | | jqxLinkButton | Displays a button with anchor tag. | jqwidgets-ng/jqxlinkbutton | jqxLinkButtonComponent | jqxLinkButtonModule | <jqxLinkButton> | jQuery | | jqxListBox | Displays a list of selectable items. | jqwidgets-ng/jqxlistbox | jqxListBoxComponent | jqxListBoxModule | <jqxListBox> | Angular · jQuery | | jqxListMenu | Displays a collection of Unordered and Ordered Lists. | jqwidgets-ng/jqxlistmenu | jqxListMenuComponent | jqxListMenuModule | <jqxListMenu> | Angular · jQuery | | jqxLoader | Displays a built-in loading element. | jqwidgets-ng/jqxloader | jqxLoaderComponent | jqxLoaderModule | <jqxLoader> | Angular · jQuery | | jqxMaskedInput | Uses a mask to distinguish between proper and improper user input. | jqwidgets-ng/jqxmaskedinput | jqxMaskedInputComponent | jqxMaskedInputModule | <jqxMaskedInput> | Angular · jQuery | | jqxMenu | Enables you to add menus to your website or web application. | jqwidgets-ng/jqxmenu | jqxMenuComponent | jqxMenuModule | <jqxMenu> | Angular · jQuery | | jqxNavBar | Is Built from UL and LI tags and can be used for creating responsive horizontal/vertical layouts or simple navigation menus. | jqwidgets-ng/jqxnavbar | jqxNavBarComponent | jqxNavBarModule | <jqxNavBar> | Angular · jQuery | | jqxNavigationBar | Is Similar to Tabs, NavigationBar has header and content sections. | jqwidgets-ng/jqxnavigationbar | jqxNavigationBarComponent | jqxNavigationBarModule | <jqxNavigationBar> | Angular · jQuery | | jqxNotification | Displays an unobtrusive notification to the user. | jqwidgets-ng/jqxnotification | jqxNotificationComponent | jqxNotificationModule | <jqxNotification> | Angular · jQuery | | jqxNumberInput | Enables users to input numbers. | jqwidgets-ng/jqxnumberinput | jqxNumberInputComponent | jqxNumberInputModule | <jqxNumberInput> | Angular · jQuery | | jqxPanel | Enables users to display content in a scrollable panel. | jqwidgets-ng/jqxpanel | jqxPanelComponent | jqxPanelModule | <jqxPanel> | Angular · jQuery | | jqxPasswordInput | Enables users to input passwords. | jqwidgets-ng/jqxpasswordinput | jqxPasswordInputComponent | jqxPasswordInputModule | <jqxPasswordInput> | Angular · jQuery | | jqxPickList | A dual-list picker for moving items between an available list and a selected list. | jqwidgets-ng/jqxpicklist | jqxPickListComponent | jqxPickListModule | <jqxPickList> | Angular · jQuery | | jqxPivotDesigner | Lets users design a PivotGrid interactively. | jqwidgets-ng/jqxpivotdesigner | jqxPivotDesignerComponent | jqxPivotDesignerModule | <jqxPivotDesigner> | jQuery | | jqxPivotGrid | Displays summarized data in a multi-dimensional, cross-tabulated view. | jqwidgets-ng/jqxpivotgrid | jqxPivotGridComponent | jqxPivotGridModule | <jqxPivotGrid> | Angular · jQuery | | jqxPopover | Displays a Small overlay of content that is used to display secondary information of any element when it is clicked by a user. | jqwidgets-ng/jqxpopover | jqxPopoverComponent | jqxPopoverModule | <jqxPopover> | Angular · jQuery | | jqxProgressBar | Visually indicates the progress of a lengthy operation. | jqwidgets-ng/jqxprogressbar | jqxProgressBarComponent | jqxProgressBarModule | <jqxProgressBar> | Angular · jQuery | | jqxQRcode | QR Codes encode text values in a two-dimensional pattern. | jqwidgets-ng/jqxqrcode | jqxQRcodeComponent | jqxQRcodeModule | <jqxQRcode> | Angular · jQuery | | jqxRadioButton | Enables users make a choice among a set of mutually exclusive, related options. | jqwidgets-ng/jqxradiobutton | jqxRadioButtonComponent | jqxRadioButtonModule | <jqxRadioButton> | jQuery | | jqxRadioButtonGroup | Displays a check box group of items. | jqwidgets-ng/jqxradiobuttongroup | jqxRadioButtonGroupComponent | jqxRadioButtonGroupModule | <jqxRadioButtonGroup> | jQuery | | jqxRangeSelector | Can easily be used to select a numeric or date range. | jqwidgets-ng/jqxrangeselector | jqxRangeSelectorComponent | jqxRangeSelectorModule | <jqxRangeSelector> | Angular · jQuery | | jqxRating | Allows you to choose a rating. | jqwidgets-ng/jqxrating | jqxRatingComponent | jqxRatingModule | <jqxRating> | Angular · jQuery | | jqxRepeatButton | Represents a button, which fires repeating click events, when the button is clicked. | jqwidgets-ng/jqxrepeatbutton | jqxRepeatButtonComponent | jqxRepeatButtonModule | <jqxRepeatButton> | jQuery | | jqxResponsivePanel | Displays responsive panel with collapse point on resize. | jqwidgets-ng/jqxresponsivepanel | jqxResponsivePanelComponent | jqxResponsivePanelModule | <jqxResponsivePanel> | Angular · jQuery | | jqxRibbon | Can be used as a tabbed toolbar or a mega menu. | jqwidgets-ng/jqxribbon | jqxRibbonComponent | jqxRibbonModule | <jqxRibbon> | Angular · jQuery | | jqxScheduler | Displays a set of Appointments in Day, Week, Month, Timeline Day, Timeline Week and Timeline Month and Agenda views. | jqwidgets-ng/jqxscheduler | jqxSchedulerComponent | jqxSchedulerModule | <jqxScheduler> | Angular · jQuery | | jqxScrollBar | Provides a scroll bar that has a sliding thumb whose position corresponds to a value. | jqwidgets-ng/jqxscrollbar | jqxScrollBarComponent | jqxScrollBarModule | <jqxScrollBar> | Angular · jQuery | | jqxScrollView | Can be used for viewing content which is wider than the visible area outlined by the device's screen. | jqwidgets-ng/jqxscrollview | jqxScrollViewComponent | jqxScrollViewModule | <jqxScrollView> | Angular · jQuery | | jqxSlider | Represents a flexible Slider that lets the user select from a range of values by moving a thumb along a track. | jqwidgets-ng/jqxslider | jqxSliderComponent | jqxSliderModule | <jqxSlider> | Angular · jQuery | | jqxSortable | Enables users to change the position of elements through drag and drop. | jqwidgets-ng/jqxsortable | jqxSortableComponent | jqxSortableModule | <jqxSortable> | Angular · jQuery | | jqxSplitLayout | Enables users to create complex Layouts and to re-arrange them dynamically | jqwidgets-ng/jqxsplitlayout | jqxSplitLayoutComponent | jqxSplitLayoutModule | <jqxSplitLayout> | Angular · jQuery | | jqxSplitter | Displays a Splitter. It divides two panels with a split bar and the size of each panel can be adjusted through the split bar. | jqwidgets-ng/jqxsplitter | jqxSplitterComponent | jqxSplitterModule | <jqxSplitter> | Angular · jQuery | | jqxSwitchButton | Displays a switch button. | jqwidgets-ng/jqxswitchbutton | jqxSwitchButtonComponent | jqxSwitchButtonModule | <jqxSwitchButton> | jQuery | | jqxTabs | Displays Tabs that break the content into multiple sections. | jqwidgets-ng/jqxtabs | jqxTabsComponent | jqxTabsModule | <jqxTabs> | Angular · jQuery | | jqxTagCloud | Displays a collection of user-generated tags accompanying the articles, posts, or videos on your website. | jqwidgets-ng/jqxtagcloud | jqxTagCloudComponent | jqxTagCloudModule | <jqxTagCloud> | Angular · jQuery | | jqxTextArea | Displays a Text area on a web page. | jqwidgets-ng/jqxtextarea | jqxTextAreaComponent | jqxTextAreaModule | <jqxTextArea> | Angular · jQuery | | jqxTimeline | Displays a timeline of items. | jqwidgets-ng/jqxtimeline | jqxTimelineComponent | jqxTimelineModule | <jqxTimeline> | Angular · jQuery | | jqxTimePicker | Represents hours and minutes as an o'clock in a circular graph. | jqwidgets-ng/jqxtimepicker | jqxTimePickerComponent | jqxTimePickerModule | <jqxTimePicker> | Angular · jQuery | | jqxToggleButton | Displays a Button which can be toggled and have two states - checked and unchecked. | jqwidgets-ng/jqxtogglebutton | jqxToggleButtonComponent | jqxToggleButtonModule | <jqxToggleButton> | jQuery | | jqxToolBar | Displays a bar with tools such as buttons, drop-downs and others. | jqwidgets-ng/jqxtoolbar | jqxToolBarComponent | jqxToolBarModule | <jqxToolbar> | Angular · jQuery | | jqxTooltip | Enables users to display a popup message. | jqwidgets-ng/jqxtooltip | jqxTooltipComponent | jqxTooltipModule | <jqxTooltip> | Angular · jQuery | | jqxTree | Represents a Tree that displays a hierarchical collection of items. | jqwidgets-ng/jqxtree | jqxTreeComponent | jqxTreeModule | <jqxTree> | Angular · jQuery | | jqxTreeGrid | Represents data in a tree-like structure. | jqwidgets-ng/jqxtreegrid | jqxTreeGridComponent | jqxTreeGridModule | <jqxTreeGrid> | Angular · jQuery | | jqxTreeMap | Displays hierarchical data as a set of nested rectangles. | jqwidgets-ng/jqxtreemap | jqxTreeMapComponent | jqxTreeMapModule | <jqxTreeMap> | Angular · jQuery | | jqxValidator | Enables you to validate users input. | jqwidgets-ng/jqxvalidator | jqxValidatorComponent | jqxValidatorModule | <jqxValidator> | Angular · jQuery | | jqxWindow | Enables you to direct a user�s attention to a particular activity in your web application, such as entering data or viewing information. | jqwidgets-ng/jqxwindow | jqxWindowComponent | jqxWindowModule | <jqxWindow> | Angular · jQuery |

Themes

jqx.base.css carries the layout and must always be loaded; a theme stylesheet on top of it supplies the colours, fonts and spacing. Set the theme per component with the theme input. Themes in the package: material, material-green, material-purple, fluent, tailwind, tailwind-dark, bootstrap, light, dark, highcontrast, metro, metrodark, office, web, flat, fresh, arctic, glacier, energyblue, darkblue, orange, summer, black, shinyblack, classic, android, blackberry, mobile, windowsphone, blue, dark-ie, light-ie, and the eight ui-* jQuery UI colour schemes. Custom themes can be built with the online Theme Builder.

Server-side rendering

The components can be part of an Angular SSR application: on the server they render only their host element, and the widget is created once the application runs in the browser.

If something goes wrong

| What you see | Why | What to do | |---|---|---| | 'jqxGrid' is not a known element (NG8001), or Can't bind to 'source' since it isn't a known property | The component is not in the imports of the component (or NgModule) whose template uses it | Add jqxGridComponent - or jqxGridModule - to imports | | The component renders an empty box and nothing else | The stylesheets are not loaded, so the widget has no size, or theme names a stylesheet that is not loaded | Add jqx.base.css and a theme to angular.json styles; the theme value must match a loaded jqx.<theme>.css | | JQXLite is not defined in a production build only | A bundler configured to treat this package as side-effect free dropped the runtime import at the top of the component bundle | The package declares sideEffects: true; do not override it in your build configuration | | Please include jqxinput.js (or another script name) | An older version of the package with an incomplete runtime import | Update the package; every component now imports the bundle that carries its dependencies | | A method called in ngOnInit throws | The widget is created in ngAfterViewInit, after the view exists | Call widget methods from ngAfterViewInit or later, or from an event handler | | "jQWidgets License Key Not Found" in the console, a www.jqwidgets.com label on the widget | The evaluation build is running without a license key | Apply the license key from your license email; see Licensing |

Working with an AI assistant

npx jqwidgets-mcp-server gives Claude Code, Cursor, Copilot and any other MCP client the full API of every widget - properties, methods, events and data types - and a code generator that emits Angular components with the entry points and class names above, so generated code compiles first time. See jqwidgets-mcp-server on npm.

Licensing

jQWidgets is commercial software distributed under the jQWidgets license. You are welcome to evaluate it. Builds without a license key show an evaluation notice and are not licensed for production use.

Sales and licensing: [email protected]

Support

• Angular demos: https://www.jqwidgets.com/angular/
• Documentation: https://www.jqwidgets.com/jquery-widgets-documentation/
• Forums: https://www.jqwidgets.com/community/
• Source and issues: https://github.com/jqwidgets/jQWidgets

Security reports: email [email protected] with a subject line beginning SECURITY:. Please include the affected version and a reproduction; you will hear back from a person within three business days.