node -vin cmd. It will output the current version.
Note: Make sure that you are running on the latest
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)
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
Note: Structure may vary based on your application needs.
First we need to install the Angular and Typescript required modules. For that we need a package.json file. Here is ours:
After your package.json is ready type npm install in your CLI.
Then we need to configure the tsconfig.json file:
And finally the system.config.js file:
Note: Configuration may vary based on your application needs.
Note: Here we use
JIT compilation which means that our 'TypeScript' files are compiled in run time.
Add the needed references:
Import main.ts to index.html:
Add the <my-app></my-app> tag to the body of index.html. That's the tag where we initialize the main component.
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.
Now it's time to create the AppComponent class.
1) @ViewChild: It holds the reference to the widget.
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.
We need to set an additional attribute to the angular component tag in order to bind to the event -
Every widget have a method
setOptions which accepts a object as an argument. This object contains widget settings.
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:
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.
Note: Angular is supported only in modern web browsers such as: Chrome, Firefox, Edge and IE11.
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:
If you won't be using the Two Way Data Binding ,
ngModel and all it`s needed code from the