Javascript/jQuery UI Widgets

Show Demo List

Theme:

Angular 2 Components for jQWidgets

Angular 2 is a development platform for building mobile and desktop web applications. It provides a way to build apps for any deployment target by reusing existing code. Using HTML as the template language, Angular 2 offers developers the possiblity to create their own components.

A. Prerequisites

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

Note: Verify that you are running at least node v4.x.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors.

B. Getting Started

Steps:

Create your main project folder, e.g. "AppName". It will contain all package dependencies and configuration files.
Generate Angular 2 components.
Build and run the app

Fast overview of the structure of the application

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

Note: Application structure


 /AppName
    /app
         /app.component.js           - auto generated
         /app.component.js.map       - auto generated
         /app.component.ts
         /boot.js                    - auto generated
         /boot.js.map                - auto generated
         /boot.ts
    /index.html
    /systemjs.config.js
    /tsconfig.json

Step 1 - Configuration

Project configuration

- First we need to set SystemJS to load the modules for our example. You can also use a different one, e.g RequireJS.

Below you can see the source code for our systemjs.config.js file:

- Next we have to configure the tsconfig.json

- Create index.html

- Finally, create the app folder with files app.component.ts and boot.ts

Step 2 - Generating file content

Create index.html

Add the needed references:

Import boot.ts to "index.html" by adding the following lines:

Add the <my-app></my-app> tag to the body of "index.html". That's the main component that will hold the contents of the application.

Create boot.ts

Load the "AppComponent" class from the file "app.component.ts", like shown in the example below.

Note:

Use ./app.component without the file extension.

We separate boot.ts and app.component.ts , even though they could be placed in one component.

Create app.component.ts. This is the main component.

Make a reference to "jqwidgets.d.ts". The file contains all the definitions for the widgets.

Import the needed components for the app.

First import the Angular2 key components - Component, ViewChild, AfterViewChecked. Then the desired widget(s).

Next we have to configure the settings for "@Component".

Now it's time to create the AppComponent class.

1) Set @ViewChild

Additional fields can be set:

2) Set constructor()

3) Set ngAfterViewChecked

4) Create the Initialize() function. All widgets have a function called "createWidget" that accepts only one argument - an object containing the desired settings for the widget.

Binding to events

First we need to set an additional attribute to the angularWidget tag in order to bind to the event - OnInitialized

Next step is to bind to the event - "(OnInitialized)=doUpdate()". If the attribute consists only of "(OnInitialized)" without applying an additional name for the event handler function, "OnInitialized" will be used as a name for the event handler function in our *.ts file. Event Names in the Angular 2 Components are the same as the Event Names in the Javascript Widgets. The only thing which you need to do is to put "On" before the Javascript widget's event name which starts with uppercase letter.

Method usage

Step 3 - Building the application

It's possible to use a library that will watch the .ts files for any changes and when you save a file it will convert it into a normal *.js one.

Note: To compile manually "app.component.ts" to "app.component.js" and "boot.ts" to "boot.js".

tsc app.component.ts

You need to use this command every time you make changes to app.ts.
Another way is to use some plug-in to do this automaticly.

tsc app.component.ts --out app.component.js --watch

This command will recompile 'app.component.ts' on every save we make.

C. Example Files

index.html

boot.ts

app.component.ts

Note: Angular 2 is supported only in modern web browsers such as: Chrome, Firefox, Edge and IE11.

Reference libraries in the demos:

ES6 Shim
Reflection
SystemJS
Zone.js
RxJS