jqwidgets-ng - Angular UI components: data grid, scheduler, Gantt, charts and 80 more

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

Angular demos · Angular documentation · License & pricing

jQWidgets is commercial software. See Licensing.

At a glance

| | | |---|---| | Angular | 19 and later, standalone components or NgModules, zoneless change detection, signal queries (viewChild()), SSR | | Forms | ngModel and reactive forms on the input components | | TypeScript | Every option, event and method typed against the bundled jqwidgets.d.ts | | Themes | 46, including Tailwind, Tailwind Blue, Material, Fluent and Bootstrap, each with a dark variant | | Accessibility | WAI-ARIA roles and states, keyboard navigation, high-contrast theme - see the accessibility guide | | Security | Runs under a strict Content-Security-Policy; SBOM, security policy and advisories | | AI assistants | An MCP server, llms.txt and a Markdown copy of every documentation page |

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

ng add jqwidgets-ng

ng add installs the package and adds the base stylesheet and the theme you pick to angular.json. To do it by hand, npm install jqwidgets-ng and add the styles:

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

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="tailwind-blue" [width]="500" [source]="source" [columns]="columns"></jqxGrid>`
})
export class AppComponent {
    source = new jqx.dataAdapter({
        datatype: 'array',
        localdata: [{ name: 'Nancy', title: 'Sales Representative' }, { name: 'Andrew', title: 'Vice President' }],
        datafields: [{ name: 'name', type: 'string' }, { name: 'title', type: 'string' }]
    });
    columns: jqwidgets.GridColumn[] = [{ text: 'Name', datafield: 'name' }, { text: 'Title', datafield: 'title' }];
}

jqx (the data adapter and other helpers) and the jqwidgets type namespace are global once a component is imported. 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>

In the class, reach the component with a signal query:

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

@Component({ /* ... */ imports: [jqxGridComponent, jqxButtonComponent] })
export class AppComponent {
    readonly grid = viewChild.required<jqxGridComponent>('grid');

    onRowSelect(event: any): void {
        console.log(event.args.rowindex, this.grid().getrowdata(event.args.rowindex));
    }
}

The option, event and method names are those of the jQWidgets API, so the Angular documentation of each widget applies as written. An option is both an input ([value]="140") and a getter/setter method (this.gauge().value(140), this.gauge().value()). The components work with zoneless change detection (the default for new Angular apps): show values from widget events through signals.

Data from a server

Bind a jqx.dataAdapter with a url for the grid's own requests, or give it a loadServerData(params, settings, callback) function to load through HttpClient, fetch, supabase-js or the Firebase SDK. The jqxGrid section of the Angular documentation has step-by-step tutorials, from data binding and editing to Supabase, Cloud Firestore and GraphQL, each written from an Angular CLI project that ran.

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 | Barcode generator for common 1D symbologies, rendered as SVG or Canvas. | jqwidgets-ng/jqxbarcode | jqxBarcodeComponent | jqxBarcodeModule | <jqxBarcode> | Angular · jQuery | | jqxBarGauge | Circular bar gauge that compares several values at once. | jqwidgets-ng/jqxbargauge | jqxBarGaugeComponent | jqxBarGaugeModule | <jqxBarGauge> | Angular · jQuery | | jqxBulletChart | Compact bullet chart that shows a measure against a target and qualitative ranges. | 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 | Month calendar with single, multiple and range date selection. | jqwidgets-ng/jqxcalendar | jqxCalendarComponent | jqxCalendarModule | <jqxCalendar> | Angular · jQuery | | jqxChart | Over 30 chart types (line, area, bar, pie, donut, range, financial, polar and spider) rendered as SVG or HTML5 Canvas. | jqwidgets-ng/jqxchart | jqxChartComponent | jqxChartModule | <jqxChart> | Angular · jQuery | | jqxChat | Chat UI with message list, typing indicator, attachments and AI assistant integration. | 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 | Colour picker with saturation/hue palettes and hex and RGB entry. | jqwidgets-ng/jqxcolorpicker | jqxColorPickerComponent | jqxColorPickerModule | <jqxColorPicker> | Angular · jQuery | | jqxComboBox | Editable drop-down with auto-complete, multi-select tokens and remote search. | jqwidgets-ng/jqxcombobox | jqxComboBoxComponent | jqxComboBoxModule | <jqxComboBox> | Angular · jQuery | | jqxComplexInput | Input for complex numbers in algebraic form. | jqwidgets-ng/jqxcomplexinput | jqxComplexInputComponent | jqxComplexInputModule | <jqxComplexInput> | Angular · jQuery | | jqxDataTable | Lightweight table built on native table markup, with paging, sorting, filtering, grouping and editing. | jqwidgets-ng/jqxdatatable | jqxDataTableComponent | jqxDataTableModule | <jqxDataTable> | Angular · jQuery | | jqxDateTimeInput | Masked date and time input with a drop-down calendar and range selection. | jqwidgets-ng/jqxdatetimeinput | jqxDateTimeInputComponent | jqxDateTimeInputModule | <jqxDateTimeInput> | Angular · jQuery | | jqxDocking | Dashboard of windows that can be dragged between columns, collapsed and closed. | jqwidgets-ng/jqxdocking | jqxDockingComponent | jqxDockingModule | <jqxDocking> | Angular · jQuery | | jqxDockingLayout | Layout whose panels can be docked, floated and rearranged by drag-and-drop. | jqwidgets-ng/jqxdockinglayout | jqxDockingLayoutComponent | jqxDockingLayoutModule | <jqxDockingLayout> | Angular · jQuery | | jqxDockPanel | Container that docks children to its top, left, right or bottom. | jqwidgets-ng/jqxdockpanel | jqxDockPanelComponent | jqxDockPanelModule | <jqxDockPanel> | Angular · jQuery | | jqxDragDrop | Drag-and-drop plugin with drop targets, feedback and revert. | jqwidgets-ng/jqxdragdrop | jqxDragDropComponent | jqxDragDropModule | <jqxDragDrop> | Angular · jQuery | | jqxDraw | Low-level drawing API for SVG and Canvas shapes, text and paths. | 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 | Drop-down list with check boxes, grouping, templates and filtering. | jqwidgets-ng/jqxdropdownlist | jqxDropDownListComponent | jqxDropDownListModule | <jqxDropDownList> | Angular · jQuery | | jqxEditor | WYSIWYG HTML editor with a configurable toolbar, source view and paste cleanup. | jqwidgets-ng/jqxeditor | jqxEditorComponent | jqxEditorModule | <jqxEditor> | Angular · jQuery | | jqxExpander | Collapsible panel with a header and content. | jqwidgets-ng/jqxexpander | jqxExpanderComponent | jqxExpanderModule | <jqxExpander> | Angular · jQuery | | jqxFileUpload | File upload with multiple files, progress, validation and localisation. | jqwidgets-ng/jqxfileupload | jqxFileUploadComponent | jqxFileUploadModule | <jqxFileUpload> | Angular · jQuery | | jqxForm | Form built from a JSON template of fields, groups and buttons, with layout and validation. | jqwidgets-ng/jqxform | jqxFormComponent | jqxFormModule | <jqxForm> | Angular · jQuery | | jqxFormattedInput | Numeric input for binary, octal, decimal and hexadecimal values. | jqwidgets-ng/jqxformattedinput | jqxFormattedInputComponent | jqxFormattedInputModule | <jqxFormattedInput> | Angular · jQuery | | jqxGantt | Gantt chart with tasks, dependencies, milestones, resources and a task tree. | jqwidgets-ng/jqxgantt | jqxGanttComponent | jqxGanttModule | <jqxGantt> | Angular · jQuery | | jqxGauge | Radial and linear gauges with ranges, ticks, labels and animated pointers. | jqwidgets-ng/jqxgauge | jqxGaugeComponent | jqxGaugeModule | <jqxGauge> | Angular · jQuery | | jqxGrid | Data grid with sorting, filtering, grouping, paging, editing, aggregates, export and virtual scrolling for large datasets. | jqwidgets-ng/jqxgrid | jqxGridComponent | jqxGridModule | <jqxGrid> | Angular · jQuery | | jqxHeatMap | Heat map that colours a matrix of values on a configurable colour scale. | jqwidgets-ng/jqxheatmap | jqxHeatMapComponent | jqxHeatMapModule | <jqxHeatMap> | Angular · jQuery | | jqxInput | Text input with auto-complete from a local or remote data source. | jqwidgets-ng/jqxinput | jqxInputComponent | jqxInputModule | <jqxInput> | Angular · jQuery | | jqxKanban | Kanban board with columns, swimlanes, drag-and-drop cards and templates. | jqwidgets-ng/jqxkanban | jqxKanbanComponent | jqxKanbanModule | <jqxKanban> | Angular · jQuery | | jqxKnob | Rotary knob control with custom dials, markers and pointers. | jqwidgets-ng/jqxknob | jqxKnobComponent | jqxKnobModule | <jqxKnob> | Angular · jQuery | | jqxLayout | IDE-style layout with tabbed groups, auto-hide and floating panels. | 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 | List with single or multiple selection, check boxes, grouping, filtering and drag-and-drop. | jqwidgets-ng/jqxlistbox | jqxListBoxComponent | jqxListBoxModule | <jqxListBox> | Angular · jQuery | | jqxListMenu | Mobile-style drill-down list menu with filtering. | jqwidgets-ng/jqxlistmenu | jqxListMenuComponent | jqxListMenuModule | <jqxListMenu> | Angular · jQuery | | jqxLoader | Loading indicator overlay with text and images. | jqwidgets-ng/jqxloader | jqxLoaderComponent | jqxLoaderModule | <jqxLoader> | Angular · jQuery | | jqxMaskedInput | Input that restricts typing to a mask such as phone numbers, zip codes or IDs. | jqwidgets-ng/jqxmaskedinput | jqxMaskedInputComponent | jqxMaskedInputModule | <jqxMaskedInput> | Angular · jQuery | | jqxMenu | Horizontal, vertical and context menus with nested submenus and keyboard support. | jqwidgets-ng/jqxmenu | jqxMenuComponent | jqxMenuModule | <jqxMenu> | Angular · jQuery | | jqxNavBar | Responsive horizontal or vertical navigation bar. | jqwidgets-ng/jqxnavbar | jqxNavBarComponent | jqxNavBarModule | <jqxNavBar> | Angular · jQuery | | jqxNavigationBar | Accordion of expandable sections. | jqwidgets-ng/jqxnavigationbar | jqxNavigationBarComponent | jqxNavigationBarModule | <jqxNavigationBar> | Angular · jQuery | | jqxNotification | Toast notifications with templates, stacking and auto-close. | jqwidgets-ng/jqxnotification | jqxNotificationComponent | jqxNotificationModule | <jqxNotification> | Angular · jQuery | | jqxNumberInput | Numeric input with spin buttons, currency and percentage modes and min/max limits. | jqwidgets-ng/jqxnumberinput | jqxNumberInputComponent | jqxNumberInputModule | <jqxNumberInput> | Angular · jQuery | | jqxPanel | Scrollable container with styled scrollbars and sizing modes. | jqwidgets-ng/jqxpanel | jqxPanelComponent | jqxPanelModule | <jqxPanel> | Angular · jQuery | | jqxPasswordInput | Password input with a show-password toggle and a strength indicator. | jqwidgets-ng/jqxpasswordinput | jqxPasswordInputComponent | jqxPasswordInputModule | <jqxPasswordInput> | Angular · jQuery | | jqxPickList | Dual list for moving items between an available 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 | Pivot table for summarising data by rows, columns and aggregate functions, with a drag-and-drop designer. | jqwidgets-ng/jqxpivotgrid | jqxPivotGridComponent | jqxPivotGridModule | <jqxPivotGrid> | Angular · jQuery | | jqxPopover | Popover anchored to an element, with a title, arrow and any content. | jqwidgets-ng/jqxpopover | jqxPopoverComponent | jqxPopoverModule | <jqxPopover> | Angular · jQuery | | jqxProgressBar | Horizontal or vertical progress bar with custom ranges and labels. | jqwidgets-ng/jqxprogressbar | jqxProgressBarComponent | jqxProgressBarModule | <jqxProgressBar> | Angular · jQuery | | jqxQRcode | QR code generator with error-correction levels, colours and an embedded logo. | 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 | Range slider over a numeric or date scale, often used to filter a chart or grid. | jqwidgets-ng/jqxrangeselector | jqxRangeSelectorComponent | jqxRangeSelectorModule | <jqxRangeSelector> | Angular · jQuery | | jqxRating | Star rating control with precision and custom images. | 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 | Side panel that collapses into a toggle button on small screens. | jqwidgets-ng/jqxresponsivepanel | jqxResponsivePanelComponent | jqxResponsivePanelModule | <jqxResponsivePanel> | Angular · jQuery | | jqxRibbon | Office-style ribbon with tabbed command groups. | jqwidgets-ng/jqxribbon | jqxRibbonComponent | jqxRibbonModule | <jqxRibbon> | Angular · jQuery | | jqxScheduler | Calendar scheduler with day, week, month, timeline and agenda views, recurring appointments and resources. | jqwidgets-ng/jqxscheduler | jqxSchedulerComponent | jqxSchedulerModule | <jqxScheduler> | Angular · jQuery | | jqxScrollBar | Styled horizontal and vertical scrollbars. | jqwidgets-ng/jqxscrollbar | jqxScrollBarComponent | jqxScrollBarModule | <jqxScrollBar> | Angular · jQuery | | jqxScrollView | Swipeable carousel of pages or images. | jqwidgets-ng/jqxscrollview | jqxScrollViewComponent | jqxScrollViewModule | <jqxScrollView> | Angular · jQuery | | jqxSlider | Horizontal or vertical slider with a single value or a range, ticks and tooltips. | jqwidgets-ng/jqxslider | jqxSliderComponent | jqxSliderModule | <jqxSlider> | Angular · jQuery | | jqxSortable | Reorder list items or elements by dragging. | jqwidgets-ng/jqxsortable | jqxSortableComponent | jqxSortableModule | <jqxSortable> | Angular · jQuery | | jqxSplitLayout | Nested split layout defined from a JSON structure. | jqwidgets-ng/jqxsplitlayout | jqxSplitLayoutComponent | jqxSplitLayoutModule | <jqxSplitLayout> | Angular · jQuery | | jqxSplitter | Resizable, collapsible panels split horizontally or vertically. | jqwidgets-ng/jqxsplitter | jqxSplitterComponent | jqxSplitterModule | <jqxSplitter> | Angular · jQuery | | jqxSwitchButton | Displays a switch button. | jqwidgets-ng/jqxswitchbutton | jqxSwitchButtonComponent | jqxSwitchButtonModule | <jqxSwitchButton> | jQuery | | jqxTabs | Tabs with scrolling, closable and reorderable tabs, and lazy content loading. | jqwidgets-ng/jqxtabs | jqxTabsComponent | jqxTabsModule | <jqxTabs> | Angular · jQuery | | jqxTagCloud | Tag cloud that sizes and colours tags by weight. | jqwidgets-ng/jqxtagcloud | jqxTagCloudComponent | jqxTagCloudModule | <jqxTagCloud> | Angular · jQuery | | jqxTextArea | Multi-line text input with auto-complete and a styled scrollbar. | jqwidgets-ng/jqxtextarea | jqxTextAreaComponent | jqxTextAreaModule | <jqxTextArea> | Angular · jQuery | | jqxTimeline | Vertical or horizontal timeline of dated events. | jqwidgets-ng/jqxtimeline | jqxTimelineComponent | jqxTimelineModule | <jqxTimeline> | Angular · jQuery | | jqxTimePicker | Analog clock-face time picker for hours and minutes. | 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 | Toolbar that holds buttons, inputs and drop-downs and collapses overflowing items into a menu. | jqwidgets-ng/jqxtoolbar | jqxToolBarComponent | jqxToolBarModule | <jqxToolbar> | Angular · jQuery | | jqxTooltip | Tooltip with positions, triggers, delays and HTML content. | jqwidgets-ng/jqxtooltip | jqxTooltipComponent | jqxTooltipModule | <jqxTooltip> | Angular · jQuery | | jqxTree | Tree view with check boxes, drag-and-drop, load-on-demand and keyboard navigation. | jqwidgets-ng/jqxtree | jqxTreeComponent | jqxTreeModule | <jqxTree> | Angular · jQuery | | jqxTreeGrid | Hierarchical grid that shows tree data in columns, with load-on-demand, editing, aggregates and export. | jqwidgets-ng/jqxtreegrid | jqxTreeGridComponent | jqxTreeGridModule | <jqxTreeGrid> | Angular · jQuery | | jqxTreeMap | Treemap that shows hierarchical data as nested rectangles sized and coloured by value. | jqwidgets-ng/jqxtreemap | jqxTreeMapComponent | jqxTreeMapModule | <jqxTreeMap> | Angular · jQuery | | jqxValidator | Form validation rules with inline hints and custom rules. | jqwidgets-ng/jqxvalidator | jqxValidatorComponent | jqxValidatorModule | <jqxValidator> | Angular · jQuery | | jqxWindow | Dialog window that can be modal, dragged, resized, collapsed and animated. | 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; its value is the stylesheet's name without jqx. and .css, and that stylesheet must be in angular.json.

| Kind | Themes | |---|---| | Design systems, light and dark | tailwind / tailwind-dark, tailwind-blue / tailwind-blue-dark, material / material-dark, material-green / material-green-dark, material-purple / material-purple-dark, fluent / fluent-dark, bootstrap | | Light and dark pairs | light / dark, metro / metrodark, light-ie / dark-ie, ui-lightness / ui-darkness | | High contrast | highcontrast | | Classic | office, web, flat, fresh, arctic, glacier, energyblue, darkblue, orange, summer, black, shinyblack, classic, android, blackberry, mobile, windowsphone, blue, ui-le-frog, ui-overcast, ui-redmond, ui-smoothness, ui-start, ui-sunny |

New in 27.1.0: tailwind-blue, tailwind-blue-dark, material-dark, material-green-dark, material-purple-dark and fluent-dark. Custom themes can be built with the online Theme Builder.

Accessibility

The components carry WAI-ARIA roles, states and properties and work from the keyboard; status changes such as sorting and paging are announced. Give each component an accessible name (aria-label on the element, or a <label>). The accessibility guide covers roles, keyboard navigation, contrast and what the page itself must provide.

Content-Security-Policy

The components run under a strict policy, without 'unsafe-inline' or 'unsafe-eval'. With Angular's CSP nonce (ngCspNonce or the CSP_NONCE token), give the same nonce to jQWidgets with <meta name="csp-nonce" content="YOUR-NONCE"> in index.html, so the few <style> elements it adds carry it. PDF export (pdfmake) needs 'unsafe-eval'.

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 | | A method such as setColor('#ff0000') or a Gantt method is rejected by the compiler (27.0.1 and earlier) | Some argument types were generated as undefined | Update to 27.1.0 | | "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 |

For AI assistants

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.

The Angular documentation publishes an llms.txt index at https://www.jqwidgets.com/angular-components-documentation/llms.txt and the whole site in llms-full.txt; every page has a Markdown copy at its own address plus .md.

Facts that keep generated code correct:

• Names are exact and case-sensitive: jqxDataTableComponent from jqwidgets-ng/jqxdatatable, jqxButtonComponent from jqwidgets-ng/jqxbuttons.
• Inputs use the widget's option names; outputs are the event names prefixed with on ((onRowselect), (onChange)); the event data is in $event.args.
• jqxGrid's options, columns and methods are all lower case (datafield, selectionmode, getrowdata); most other widgets use camelCase.
• Reach a component with viewChild.required<jqxGridComponent>('grid') and call methods as this.grid().selectrow(0), from ngAfterViewInit or later.

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/
• Angular documentation and grid tutorials: https://www.jqwidgets.com/angular-components-documentation/
• Security, SBOM and compliance: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/compliance/index.htm
• 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.