Angular UI Components for jQWidgets

A. Prerequisites

• Node.js - to verify that you have it installed, run the command node -v in cmd. It will output the current version.

Important:

The guide below is based on the AngularJust-in-time (JiT) compilation, which is the simplest one.
For Ahead-of-time (AoT) compilation, please refer to this guide.
You can find out about the differences here: Ahead-of-time (AoT) vs Just-in-time (JiT)

B. Getting Started

Steps:

1. Create your project folder structure.
2. Install and configurate all required modules.
3. Build and run the app

Step 1 - Create your root project folder

The root folder contains our index.html, a few configuration files, and the app folder which holds the main content of the application.

 /root
    /app
        /app.component.ts
        /app.module.ts
        /main.ts
    /index.html
    /package.json
    /tsconfig.json
    /systemjs.config.js
                        

Step 2 - Install and configurate all required modules

First we need to install the Angular and Typescript required modules. For that we need a package.json file. Here is ours:

{
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/router": "3.2.1",
    "core-js": "2.4.1",
    "rxjs": "5.0.0-rc.4",
    "systemjs": "0.19.41",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "typescript": "2.0.10"
  },
  "name": "angular-demos",
  "author": "www.jQWidgets.com"
}

After your package.json is ready type npm install in your CLI.

Then we need to configure the tsconfig.json file:

{
  "compileOnSave": false,
  "buildOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

And finally the system.config.js file:

System.config({
   transpiler: 'typescript',
   typescriptOptions: 
   { 
      emitDecoratorMetadata: true, 
      experimentalDecorators: true 
   },
   map:
   {
      '@angular': 'node_modules/@angular',
      'rxjs': 'node_modules/rxjs',
      'components': '../jqwidgets-ts/'
   },
   paths:
   {
      'node_modules/@angular/*': 'node_modules/@angular/*/bundles'
   },
   meta:
   {
       '@angular/*': { 'format': 'esm' }
   },
   packages:
   {
      '../jqwidgets-ts/': { defaultExtension: 'ts' },
      'app': { main: 'main', defaultExtension: 'ts' },
      'rxjs': { main: 'Rx' },
      '@angular/core': { main: 'core.umd.min.js' },
      '@angular/http': { main: 'http.umd.min.js' },
      '@angular/forms': { main: 'forms.umd.min.js' },
      '@angular/common': { main: 'common.umd.min.js' },
      '@angular/compiler': { main: 'compiler.umd.min.js' },
      '@angular/platform-browser': { main: 'platform-browser.umd.min.js' },
      '@angular/platform-browser-dynamic': { main: 'platform-browser-dynamic.umd.min.js' }
   }
});

Step 3 - Build and run the app

I. Create index.html

Add the needed references:

<!-- JQuery and jQWidgets Library -->
<script src="jquery"></script>
<script src="jqxcore.js"></script>
<script src="jqxbuttons.js"></script>
 
<!-- Angular and Typescript -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/typescript/lib/typescript.js"></script>
 
<!-- SystemJS -->
<script src="systemjs.config.js"></script>

Import main.ts to index.html:

<script>
    System.import('app/main').catch((err) =>
    {
        console.error(err);
    });
</script>

Add the <my-app></my-app> tag to the body of index.html. That's the tag where we initialize the main component.

II. Create app.module.ts

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

III. Create main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }  from './app.module';
 
platformBrowserDynamic().bootstrapModule(AppModule);

IV. Create app.component.ts

Make a reference to jqwidgets.d.ts. It contains all the TypeScript definitions for the widgets.

Import the Angular key components - Component, ViewChild, AfterViewInit. Then import the needed jQWidgets components.

@Component decorator:

Now it's time to create the AppComponent class.

1) @ViewChild: It holds the reference to the widget.

2) ngAfterViewInit: All widgets have a method called createComponent that accepts either no arguments or just one - an object containing the desired settings for the widget. If there is no argument then the widget is created through attributes.
For more information about creating jQWidgets through attributes please refer to this guide.

C. Events Methods & Properties

I. Events

We need to set an additional attribute to the angular component tag in order to bind to the event - onClick

II. Methods & Properties

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

D. Example Files

E. Initialize Widgets Through Attributes

This is another way of initializing a jQWidget.
Here we set the options in the tag itself as attributes. Lets take a look:

Properties names are put in square brackets [] and we can choose either to put the value direcly like in the width, height and colorScheme properties or get it from a property in our class - like in the max, values and tooltip properties.

Here is our class:

Events Methods & Properties

All of the these three can be done the same way as in the normal initialization, but also the properties which values we defined in our class can be changed directly:

This will altomaticly update them.