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 Roboto fonts to your index.html
  5. Add the Material Icon font to your index.html
  6. Add global styles to
    • Remove margins from body
    • Set height: 100% on html and body
    • Make Roboto the default font of your app
  7. Adds all required peer dependencies to package.json.
  8. Triggers npm install to install the theme and all peer packages that are added.

2. Add a jQWidgets module in src/app/app.module.ts

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

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

import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, jqxGridModule ],
    bootstrap: [ AppComponent ],
	entryComponents: [ AppComponent ]
})

export class AppModule { }

3. 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>  

4. Setup

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit, OnInit {
  @ViewChild('grid', { static: false }) grid: jqxGridComponent;

  columns = [
		{text: 'Id', datafield: 'id'},
		{text: 'Name', datafield: 'name'}
  ];
 
  source = new jqx.dataAdapter({
		localData: [
		  {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() {
	
  }
}

Component schematics

In addition to the install schematic, jQWidgets Angular comes with a schematic that can be used to easily generate a Grid component setup:

Grid schematic

ng generate jqwidgets-ng:grid

The grid schematic will create a component that renders an Angular Grid which has been pre-configured with a datasource, sorting and selection.

Grid Angular

Manual Setup

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

  1. Download and install the package.
    npm install jqwidgets-ng
  2. Once installed, import the NgModule of the components you need.

    app.module.ts

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

  3. 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"
    ]
    


2. Add the HTML for the Grid 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

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit, OnInit {
  @ViewChild('grid', { static: false }) grid: jqxGridComponent;

  columns = [
		{text: 'Id', datafield: 'id'},
		{text: 'Name', datafield: 'name'}
  ];
 
  source = new jqx.dataAdapter({
		localData: [
		  {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() {
	
  }
}



4. 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:

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: