Blogs

Tip: Angular 8 & jQWidgets Modules

A customer of jQWidgets for Angular, recently asked our Support Team how to import all jQWidgets Angular Modules from the “jqwidgets-ng” npm package. The sample “app.module.ts” below shows how to import all modules.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { jqxBarGaugeModule }    from 'jqwidgets-ng/jqxbargauge';
import { jqxBulletChartModule }    from 'jqwidgets-ng/jqxbulletchart';
import { jqxButtonModule }    from 'jqwidgets-ng/jqxbuttons';
import { jqxCalendarModule }    from 'jqwidgets-ng/jqxcalendar';
import { jqxGridModule }    from 'jqwidgets-ng/jqxgrid';
import { jqxChartModule }    from 'jqwidgets-ng/jqxchart';
import { jqxCheckBoxModule }    from 'jqwidgets-ng/jqxcheckbox';
import { jqxColorPickerModule }    from 'jqwidgets-ng/jqxcolorpicker';
import { jqxComboBoxModule }    from 'jqwidgets-ng/jqxcombobox';
import { jqxComplexInputModule }    from 'jqwidgets-ng/jqxcomplexinput';
import { jqxDataTableModule }    from 'jqwidgets-ng/jqxdatatable';
import { jqxDateTimeInputModule }    from 'jqwidgets-ng/jqxdatetimeinput';
import { jqxDockingModule }    from 'jqwidgets-ng/jqxdocking';
import { jqxDockingLayoutModule }    from 'jqwidgets-ng/jqxdockinglayout';
import { jqxDockPanelModule }    from 'jqwidgets-ng/jqxdockpanel';
import { jqxDragDropModule }    from 'jqwidgets-ng/jqxdragdrop';
import { jqxDropDownButtonModule }    from 'jqwidgets-ng/jqxdropdownbutton';
import { jqxDropDownListModule }    from 'jqwidgets-ng/jqxdropdownlist';
import { jqxEditorModule }    from 'jqwidgets-ng/jqxeditor';
import { jqxExpanderModule }    from 'jqwidgets-ng/jqxexpander';
import { jqxFileUploadModule }    from 'jqwidgets-ng/jqxfileupload';
import { jqxFormModule }    from 'jqwidgets-ng/jqxform';
import { jqxFormattedInputModule }    from 'jqwidgets-ng/jqxformattedinput';
import { jqxGaugeModule }    from 'jqwidgets-ng/jqxgauge';
import { jqxInputModule }    from 'jqwidgets-ng/jqxinput';
import { jqxKanbanModule }    from 'jqwidgets-ng/jqxkanban';
import { jqxKnobModule }    from 'jqwidgets-ng/jqxknob';
import { jqxLayoutModule }    from 'jqwidgets-ng/jqxlayout';
import { jqxLinearGaugeModule }    from 'jqwidgets-ng/jqxlineargauge';
import { jqxLinkButtonModule }    from 'jqwidgets-ng/jqxlinkbutton';
import { jqxListBoxModule }    from 'jqwidgets-ng/jqxlistbox';
import { jqxListMenuModule }    from 'jqwidgets-ng/jqxlistmenu';
import { jqxLoaderModule }    from 'jqwidgets-ng/jqxloader';
import { jqxMaskedInputModule }    from 'jqwidgets-ng/jqxmaskedinput';
import { jqxMenuModule }    from 'jqwidgets-ng/jqxmenu';
import { jqxNavBarModule }    from 'jqwidgets-ng/jqxnavbar';
import { jqxNavigationBarModule }    from 'jqwidgets-ng/jqxnavigationbar';
import { jqxNotificationModule }    from 'jqwidgets-ng/jqxnotification';
import { jqxNumberInputModule }    from 'jqwidgets-ng/jqxnumberinput';
import { jqxPanelModule }    from 'jqwidgets-ng/jqxpanel';
import { jqxPasswordInputModule }    from 'jqwidgets-ng/jqxpasswordinput';
import { jqxPivotGridModule }    from 'jqwidgets-ng/jqxpivotgrid';
import { jqxPopoverModule }    from 'jqwidgets-ng/jqxpopover';
import { jqxProgressBarModule }    from 'jqwidgets-ng/jqxprogressbar';
import { jqxRadioButtonModule }    from 'jqwidgets-ng/jqxradiobutton';
import { jqxRangeSelectorModule }    from 'jqwidgets-ng/jqxrangeselector';
import { jqxRatingModule }    from 'jqwidgets-ng/jqxrating';
import { jqxRepeatButtonModule }    from 'jqwidgets-ng/jqxrepeatbutton';
import { jqxResponsivePanelModule }    from 'jqwidgets-ng/jqxresponsivepanel';
import { jqxRibbonModule }    from 'jqwidgets-ng/jqxribbon';
import { jqxSchedulerModule }    from 'jqwidgets-ng/jqxscheduler';
import { jqxScrollBarModule }    from 'jqwidgets-ng/jqxscrollbar';
import { jqxScrollViewModule }    from 'jqwidgets-ng/jqxscrollview';
import { jqxSliderModule }    from 'jqwidgets-ng/jqxslider';
import { jqxSortableModule }    from 'jqwidgets-ng/jqxsortable';
import { jqxSplitterModule }    from 'jqwidgets-ng/jqxsplitter';
import { jqxSwitchButtonModule }    from 'jqwidgets-ng/jqxswitchbutton';
import { jqxTabsModule }    from 'jqwidgets-ng/jqxtabs';
import { jqxTagCloudModule }    from 'jqwidgets-ng/jqxtagcloud';
import { jqxTextAreaModule }    from 'jqwidgets-ng/jqxtextarea';
import { jqxToggleButtonModule }    from 'jqwidgets-ng/jqxtogglebutton';
import { jqxToolBarModule }    from 'jqwidgets-ng/jqxtoolbar';
import { jqxTooltipModule }    from 'jqwidgets-ng/jqxtooltip';
import { jqxTreeModule }    from 'jqwidgets-ng/jqxtree';
import { jqxTreeGridModule }    from 'jqwidgets-ng/jqxtreegrid';
import { jqxTreeMapModule }    from 'jqwidgets-ng/jqxtreemap';
import { jqxValidatorModule }    from 'jqwidgets-ng/jqxvalidator';
import { jqxWindowModule }    from 'jqwidgets-ng/jqxwindow';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
	jqxBarGaugeModule,
	jqxGridModule,
	jqxBulletChartModule,
	jqxButtonModule,
	jqxCalendarModule,
	jqxCheckBoxModule,
	jqxColorPickerModule,
	jqxComboBoxModule,
	jqxComplexInputModule,
	jqxDataTableModule,
	jqxDateTimeInputModule,
	jqxDockingModule,
	jqxDockingLayoutModule,
	jqxDockPanelModule,
	jqxDragDropModule,
	jqxDropDownButtonModule,
	jqxDropDownListModule,
	jqxEditorModule,
	jqxExpanderModule,
	jqxFormModule,
	jqxFormattedInputModule,
	jqxGaugeModule,
	jqxInputModule,
	jqxKanbanModule,
	jqxKnobModule,
	jqxLayoutModule,
	jqxLinearGaugeModule,
	jqxLinkButtonModule,
	jqxListBoxModule,
	jqxListMenuModule,
	jqxLoaderModule,
	jqxMaskedInputModule,
	jqxMenuModule,
	jqxNavBarModule,
	jqxNavigationBarModule,
	jqxNotificationModule,
	jqxNumberInputModule,
	jqxPanelModule,
	jqxNumberInputModule,
	jqxPasswordInputModule,
	jqxPivotGridModule,
	jqxPopoverModule,
	jqxProgressBarModule,
	jqxRangeSelectorModule,
	jqxRatingModule,
	jqxRepeatButtonModule,
	jqxResponsivePanelModule,
	jqxRibbonModule,
	jqxSchedulerModule,
	jqxScrollViewModule,
	jqxScrollBarModule,
	jqxSliderModule,
	jqxSortableModule,
	jqxSplitterModule,
	jqxSwitchButtonModule,
	jqxTabsModule,
	jqxTagCloudModule,
	jqxTextAreaModule,
	jqxToggleButtonModule,
	jqxToolBarModule,
	jqxTooltipModule,
	jqxTreeModule,
	jqxTreeGridModule,
	jqxTreeMapModule,
	jqxValidatorModule,
	jqxWindowModule,
    AppRoutingModule
 ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }