Angular UI Components Documentation

Using with Angular CLI

The Angular CLI is a command-line tool for scaffolding and building Angular applications.

1. Installation

The easiest way to get started with jQWidgets UI for Angular is to use the Angular CLI Tool. To scaffold your project structure, follow its installation instructions.

npm install -g @angular/cli
ng new jqwidgets-project
cd jqwidgets-project

Quick Setup with ng-add

jQWidgets Angular UI comes packaged with Angular CLI schematics to make creating Material applications easier. Schematics are included with both @angular/cdk and jqwidgets-ng. Once you install the npm packages, they will be available through the Angular CLI.

Angular CLI supports the addition of packages through the ng add command. The ng add command provides faster and more user-friendly package installation. To install the jQWidgets UI for Angular package use ng add and add the name of the NPM package. 


ng add jqwidgets-ng

The ng add jqwidgets-ng command executes the following actions:

  1. Adds the jqwidgets-ng package as a dependency.
  2. Imports the Modules in the current application module.
  3. Registers the default jQWidgets UI theme in the angular.json file.
  4. Add global styles to
    • Remove margins from body
    • Set height: 100% on html and body
    • Make Roboto the default font of your app
  5. Adds all required peer dependencies to package.json.
  6. Triggers npm install to install the theme and all peer packages that are added.

2. Add the HTML for jQWidgets component in src/app/app.component.html

app.component.html

 <jqxGrid 
	[selectionmode]="'checkbox'" 
	[source]="source" 
	[theme]="'material'" 
	[autoheight]="true" 
	[pageable]="true" 
	[altrows]="true" 
	[filterable]="true" 
	[sortable]="true" 
	[columns]="columns" 
#grid>
</jqxGrid>

3. Setup

app.component.ts

Setup with Angular Standalone components

import { AfterViewInit, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { jqxGridModule } from 'jqwidgets-ng/jqxgrid';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, jqxGridModule ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit, OnInit {

  columns = [
		{text: 'Id', datafield: 'id'},
		{text: 'Name', datafield: 'name'}
  ];
 
  source = [
	  {id: 1, name: 'Hydrogen'},
	  {id: 2, name: 'Helium'},
	  {id: 3, name: 'Lithium'},
	  {id: 4, name: 'Beryllium'},
	  {id: 5, name: 'Boron'},
	  {id: 6, name: 'Carbon'},
	  {id: 7, name: 'Nitrogen'},
	  {id: 8, name: 'Oxygen'},
	  {id: 9, name: 'Fluorine'},
	  {id: 10, name: 'Neon'},
	  {id: 11, name: 'Sodium'},
	  {id: 12, name: 'Magnesium'},
	  {id: 13, name: 'Aluminum'},
	  {id: 14, name: 'Silicon'},
	  {id: 15, name: 'Phosphorus'},
	  {id: 16, name: 'Sulfur'},
	  {id: 17, name: 'Chlorine'},
	  {id: 18, name: 'Argon'},
	  {id: 19, name: 'Potassium'},
	  {id: 20, name: 'Calcium'}
	];
	 
  ngOnInit() {
  }

  ngAfterViewInit() {
	
  }
}

Manual Setup

jQWidgets UI for Angular is distributed as jqwidgets-ng NPM package

  1. Download and install the package.
    npm install jqwidgets-ng
  2. Adding CSS reference

    The following CSS file is available in ../node_modules/jqwidgets-ng/ package folder. This can be referenced in [src/styles.css] using following code. 

    @import 'jqwidgets-ng/jqwidgets/styles/jqx.base.css';

    Another way to achieve the same is to edit the angular.json file and in the styles add the style. 

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


1. Add the HTML for the Grid in src/app/app.component.html

app.component.html

 <jqxGrid 
	[selectionmode]="'checkbox'" 
	[source]="source" 
	[theme]="'fluent'" 
	[autoheight]="true" 
	[pageable]="true" 
	[altrows]="true" 
	[filterable]="true" 
	[sortable]="true" 
	[columns]="columns" 
#grid>
</jqxGrid>

2. Setup

app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { jqxGridModule } from 'jqwidgets-ng/jqxgrid';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, jqxGridModule ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit, OnInit {

  columns = [
		{text: 'Id', datafield: 'id'},
		{text: 'Name', datafield: 'name'}
  ];
 
  source = [
	  {id: 1, name: 'Hydrogen'},
	  {id: 2, name: 'Helium'},
	  {id: 3, name: 'Lithium'},
	  {id: 4, name: 'Beryllium'},
	  {id: 5, name: 'Boron'},
	  {id: 6, name: 'Carbon'},
	  {id: 7, name: 'Nitrogen'},
	  {id: 8, name: 'Oxygen'},
	  {id: 9, name: 'Fluorine'},
	  {id: 10, name: 'Neon'},
	  {id: 11, name: 'Sodium'},
	  {id: 12, name: 'Magnesium'},
	  {id: 13, name: 'Aluminum'},
	  {id: 14, name: 'Silicon'},
	  {id: 15, name: 'Phosphorus'},
	  {id: 16, name: 'Sulfur'},
	  {id: 17, name: 'Chlorine'},
	  {id: 18, name: 'Argon'},
	  {id: 19, name: 'Potassium'},
	  {id: 20, name: 'Calcium'}
	];
	 
  ngOnInit() {
  }

  ngAfterViewInit() {
	
  }
}

3. Example


Edit in StackBlitz

Events Methods & Properties

I. Events

Event Names in the Angular Components are the same as the Event Names in the Javascript Widgets.
The only thing you need to do is to put "on" before the event name and upperCase it's first letter.


II. Methods & Properties


Every widget also have a method setOptions which accepts an object as an argument. This object contains widget settings.

Two Way Data Binding

We often want to both display a data property and update that property when the user makes changes.
Let's take a look at the following example: 

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
        <fieldset style="width: 300px; margin-top:1em; margin-bottom: 1em; border: 1px solid lightgrey;">
            The selected country is {{ country | json }}
        </fieldset>
 
        <jqxInput [(ngModel)]="country"
            [width]="200" [height]="25" [source]="countries"
            [minLength]="1" [items]="3">
        </jqxInput>
    `
})
 
export class AppComponent {
    country: string = '';
 
    countries: string[] = ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antarctica', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Brazil', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burma', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Central African Republic', 'Chad', 'Chile', 'China', 'Colombia', 'Comoros', 'Congo, Democratic Republic', 'Congo, Republic of the', 'Costa Rica', 'Cote d'Ivoire', 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'East Timor', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Fiji', 'Finland', 'France', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Greece', 'Greenland', 'Grenada', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, North', 'Korea, South', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Mauritania', 'Mauritius', 'Mexico', 'Micronesia', 'Moldova', 'Mongolia', 'Morocco', 'Monaco', 'Mozambique', 'Namibia', 'Nauru', 'Nepal', 'Netherlands', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Norway', 'Oman', 'Pakistan', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal', 'Qatar', 'Romania', 'Russia', 'Rwanda', 'Samoa', 'San Marino', ' Sao Tome', 'Saudi Arabia', 'Senegal', 'Serbia and Montenegro', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Togo', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Venezuela', 'Vietnam', 'Yemen', 'Zambia', 'Zimbabwe'];
}

Important:

If you are using any of the Input based widgets like jqxInput, jqxComplexInput, jqxDateTimeInput and so on you must import the FormsModule in your app.module.ts file and add it to the @NgModel imports: 

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
 
import { AppComponent }      from './app.component';
import { jqxInputModule }    from 'jqwidgets-ng/jqxinput';
 
@NgModule({
    imports: [ BrowserModule, FormsModule, jqxInputModule],
    declarations: [ AppComponent],
    bootstrap: [ AppComponent ]
})
 
export class AppModule { }