Angular 6 UI Components Documentation

Angular UI Components for jQWidgets

Angular 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 offers developers the possiblity to create their own components.

Prerequisites

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

Note: Make sure that you are running on the latest Node.js and npm versions.

Setup using create-jqwidgets-angular-app

To use a template project with jQWidgets and Angular CLI, please refer to: create-jqwidgets-angular-app
This is the simplest way to get jQWidgets working with Angular.

Setup using Angular CLI

To use the Angular Components with Angular CLI, please refer to: Angular CLI
A video tutorial is also available on YouTube: Tutorial: QuickStart Angular project with jQWidgets.

Setup using Angular WebPack

To use the Angular Components with Angular Web Pack, please refer to: Angular WebPack

Setup using Angular WebPack with Dev Server

To use the Angular Components with Angular Web Pack with Dev Server, please refer to: Angular WebPack with Dev Server

Events Methods & Properties

I. Events

Event Names in the Angular Components are the same as the Event Names in the jQuery 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: