jQWidgets
  • Docs
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Products
    • Angular
    • React
    • Vue
    • jQuery
    • Web Components
    • Blazor
    • Templates
  • Download
Javascript/jQuery UI Widgets
  • Javascript/jQuery
  • Angular
  • Vue
  • React
  • Web Components
  • Blazor
  • ASP .NET MVC
  • Templates
  • Theme Builder
Show Demo List

Web UI Widgets

  • jqxGrid
  • jqxTabs
  • jqxTextArea
  • jqxWindow
  • jqxKnob
  • jqxResponsivePanel
  • jqxGantt(NEW)
  • jqxChart
  • jqxMenu
  • jqxInput
  • jqxDocking
  • jqxGauge
  • jqxNavBar
  • jqxPivotGrid
  • jqxTree
  • jqxPasswordInput
  • jqxNotification
  • jqxBarGauge
  • jqxTagCloud
  • jqxScheduler
  • jqxNavigationBar
  • jqxMaskedInput
  • jqxPopOver
  • jqxExpander
  • jqxLoader
  • jqxTreeGrid
  • jqxListMenu
  • jqxComplexInput
  • jqxTooltip
  • jqxRating
  • jqxDraw
  • jqxDataTable
  • jqxToolBar
  • jqxFormattedInput
  • jqxColorPicker
  • jqxRangeSelector
  • jqxDragDrop
  • jqxTreeMap
  • jqxComboBox
  • jqxNumberInput
  • jqxScrollView
  • jqxSlider
  • jqxDataAdapter
  • jqxEditor
  • jqxDropDownList
  • jqxDateTimeInput
  • jqxProgressBar
  • jqxScrollBar
  • jqxResponse
  • jqxRibbon
  • jqxListBox
  • jqxCalendar
  • jqxFileUpload
  • jqxSplitter
  • jqxValidator
  • jqxSplitLayout
  • jqxBarcode (NEW)
  • jqxQRcode (NEW)
  • jqxLayout
  • jqxButtons
  • jqxKanban
  • jqxBulletChart
  • jqxSortable
  • jqxPanel
  • jqxDockingLayout
  • jqxForm
  • jqxTimePicker
  • jqxTimeline
  • jqxHeatMap

Integration & Tools

  • Chart Studio(Beta)
  • JSEditor
  • Angular
  • Typescript
  • KnockoutJS
  • Bootstrap
  • RequireJS
  • jQuery Mobile
  • ASP .NET
  • PHP
  • Java
  • Mobile Demos

Angular 2

  • Two Way Data Binding
    • Input
    • ComplexInput
    • DateTimeInput
    • FormattedInput
    • MaskedInput
    • NumberInput
    • PasswordInput
    • RadioButton
    • SwitchButton
    • CheckBox
    • Calendar
    • ComboBox
    • DropDownList
    • ListBox
    • Rating
    • Slider
    • Editor
    • TextArea
  • BarGauge
    • Overview
    • Create Through Attributes
  • Buttons
    • Overview
    • SwitchButton
    • Button Group
    • DropDown Button
    • CheckBox
    • RadioButton
  • Bullet Chart
  • Calendar
  • Chart
    • Overview
    • Column Series with Local Data
    • Donut Series
    • Polar Chart
    • Create Through Attributes
  • Color Picker
  • ComboBox
    • Overview
    • Create Through Attributes
  • ComplexInput
  • DataTable
    • Overview
    • Editing
    • Sorting
    • Filtering
    • Paging
    • Create Through Attributes
  • DateTimeInput
    • Overview
    • Create Through Attributes
  • Docking
  • DockingLayout
    • Overview
    • Create Through Attributes
  • DockPanel
  • Drag and Drop
  • Draw
  • DropDownList
    • Overview
    • Create Through Attributes
  • Editor
  • Expander
  • FileUpload
  • FormattedInput
  • Gauge
  • Grid
    • Overview
    • Paging
    • Editing
    • Filtering
    • Filter Row
    • Grouping
    • Nested Grids
    • Create Through Attributes
  • Input
  • Kanban
  • Knob
  • LinearGauge
  • ListBox
  • Layout
  • Loader
  • ListMenu
  • MaskedInput
  • Menu
  • NavBar
  • NavigationBar
  • Notification
  • NumberInput
  • Panel
  • PasswordInput
  • Popover
  • ProgressBar
  • RangeSelector
  • Rating
  • Responsive Panel
  • Ribbon
  • Scheduler
    • Overview
    • Resources
    • Create Through Attributes
  • ScrollBar
  • ScrollView
  • Slider
  • Sortable
  • Splitter
  • TagCloud
  • TextArea
  • Tabs
  • ToolBar
  • Tooltip
  • Tree
    • Overview
    • Create Through Attributes
  • TreeGrid
    • Overview
    • Virtual Mode
    • Create Through Attributes
  • TreeMap
  • Validator
  • Window
    • Overview
    • Create Through Attributes
Theme:
Fluent
  • Demo
  • View Source
  • View Typescript
  • View Template

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 node -v in cmd. It will output the current version.

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

Important:

The guide below is based on the Angular2 Just-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
                        

Note: Structure may vary based on your application needs.

Step 2 - Install and configurate all required modules

First we need to install the Angular 2 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": "angular2-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' }
}
});

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. If you want your 'TypeScript' files to be transpiled to 'JavaScript' before run time please refer to Angular 2 Ahead-of-time (AoT) compiler.

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

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 Angular2 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 createWidget 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 angularWidget tag in order to bind to the event - onClick

Note: Event Names in the Angular 2 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 Javascript widget event name and upperCase it's first letter.

myButtonOnClick(event: any): void
{
// Do something...
}

II. Methods & Properties

//Get Methods
let value = this.myButton.val();
//Set Methods
this.myButton.val('This is a new value!');
//Get Properties
let isToggled = this.myButton.toggled();
//Set Properties
this.myButton.toggled(true);

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

this.myButton.setOptions({
imgWidth: 15, rtl: true
});

D. Example Files

I. index.html

<!DOCTYPE html>
<html>
<head>
<title id='Description'>Angular 2 Button</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
<!-- JQuery and jQWidgets Library -->
<script src="jquery.js"></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>
<!-- Execute Our main.ts File -->
<script>
System.import('app/main').catch((err) =>
{
console.error(err);
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<!-- Display The Application -->
<body>
<my-app></my-app>
</body>
</html>

II. app.component.ts

/// <reference path='components/jqwidgets.d.ts' />
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { jqxButtonComponent } from 'components/angular_jqxbuttons';
@Component({
selector: 'my-app',
template: `<angularButton #buttonReference (onClick)='myButtonOnClick($event)'>
Button
</angularButton>`
})
export class AppComponent implements AfterViewInit
{
@ViewChild('buttonReference') myButton: jqxButtonComponent;
ngAfterViewInit(): void
{
this.myButton.createWidget({ width: 120, height: 40 });
}
myButtonOnClick(event: any): void
{
let args = event.args;
// Do Something
}
}

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.

Note: Angular 2 is supported only in modern web browsers such as: Chrome, Firefox, Edge and IE11.
For IE11 you must use transpiled JavaScript files.

"Ahead Of Time" Compilation using Webpack

You can compile the app in the browser, at runtime, as the application loads, using the Just-in-time (JiT) compiler. But there is another way called "Ahead-of-time (AoT)" compilation which as said in Angular2 official site: "radically improves performance". Here we covert the components and templates to executable JavaScript files before runtime.


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
        /other source files
    /index.html
    /package.json
    /tsconfig.json
    /tsconfig.aot.json
    /webpack.config.js
                        

Note: Structure may vary based on your application needs.

Step 2 - Install and configurate all required modules

Apart from the package.json and tsconfig.json you will need tsconfig.aot.json and webpack.config.js files.
The tsconfig.aot.json is a normal tsconfig.json file, but with "AoT"-oriented settings.
Let's take a look at the config files:


package.json

  • ngc compiles our .ts files to .js. It is a drop-in replacement for tsc.
  • webpack gets the transpiled .js files and bundles them to a single .js file.

When we type npm start in our CLI it executes both the commands. We just need to include the bundled file in or HTML and run it.


tsconfig.json


tsconfig.aot.json

What's really new is the ngc section called angularCompilerOptions. Here we say to the compiler to skip generating metadata files with the compiled application. We have also set "rootDir" which means all of our source files must be inside the folder named "app". For more information about АОТ please refer to the official "Ahead-of-time (AoT)" compilation cookbook.


webpack.config.js

For more information about Webpack please refer to the official guide.

Step 3 - Build and run the app

I. Create index.html

Add the needed references:

Add the <my-app></my-app> tag to the body of index.html. That's the tag where we initialize the main component.
Then import the bundled file we received after running the npm start command.

II. Create app.module.ts

III. Create main.ts

IV. Create app.component.ts

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

Import the Angular2 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.

@ViewChild('barGaugeReference') myBarGauge: jqxBarGaugeComponent;

2) ngAfterViewInit: All widgets have a method called createWidget 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.

ngAfterViewInit(): void
{
this.myBarGauge.createWidget(this.barGaugeSettings);
}

Events Methods & Properties

I. Events

We need to set an additional attribute to the angularWidget tag in order to bind to the event - onDrawEnd

<angularBarGauge (onDrawEnd)="myDrawEnd($event)"></angularBarGauge>
Note: Event Names in the Angular 2 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 Javascript widget event name and upperCase it's first letter.

myDrawEnd(event: any): void
{
// Do something...
}

II. Methods & Properties

//Get Methods
let value = this.myBarGauge.val();
//Set Methods
this.myBarGauge.val([10,20,30]);
//Get Properties
let colorScheme = this.myBarGauge.colorScheme();
//Set Properties
this.myBarGauge.colorScheme('scheme02');

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

this.myBarGauge.setOptions({
max: 100, values: [50, 70, 90, 100]
});

Example Files

I. index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Angular 2 jQWidgets AOT Webpack Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<link rel="stylesheet" href="app/styles/jqx.base.css" type="text/css" />
<!-- JQuery and jQWidgets Library -->
<script src="app/scripts/jquery-1.11.1.min.js"></script>
<script src="app/scripts/jqxcore.js"></script>
<script src="app/scripts/jqxdraw.js"></script>
<script src="app/scripts/jqxbargauge.js"></script>
<!-- Angular -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/zone.js/dist/long-stack-trace-zone.min.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
<h3>Angular 2 jQWidgets AOT Webpack Example</h3>
<my-app>Loading...</my-app>
<script src="aot/main.min.js"></script>
</body>
</html>

II. app.component.ts

/// <reference path="jqwidgets-ts/jqwidgets.d.ts" />
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { jqxBarGaugeComponent } from './jqwidgets-ts/angular_jqxbargauge';
@Component({
selector: 'my-app',
template: `<angularBarGauge #barGaugeReference></angularBarGauge>`
})
export class AppComponent implements AfterViewInit
{
@ViewChild('barGaugeReference') myBarGauge: jqxBarGaugeComponent;
ngAfterViewInit(): void
{
this.myBarGauge.createWidget(this.barGaugeSettings);
}
barGaugeSettings: jqwidgets.BarGaugeOptions =
{
colorScheme: "scheme02",
width: 600,
height: 600,
max: 150,
values: [102, 115, 130, 137],
tooltip: {
visible: true,
formatFunction: (value: string) =>
{
let realVal = parseInt(value);
return ('Year: 2016<br />Price Index:' + realVal);
}
}
}
}

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.

app.component.ts:

/// <reference path="components/jqwidgets.d.ts" />
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { jqxInputComponent } from 'components/angular_jqxinput';
@Component({
selector: 'my-app',
template: `
//Here we diplay our data
<fieldset style="width: 300px; margin-top:1em; margin-bottom: 1em">
The selected country is {{ country | json }}
</fieldset>
//Here we bind our variable to the Angular 2 ngModel
<angularInput #inputReference [(ngModel)]='country'></angularInput>`
})
export class AppComponent implements AfterViewInit
{
@ViewChild('inputReference') myInput: jqxInputComponent;
ngAfterViewInit(): void
{
this.myInput.createWidget(this.settings);
}
country: string = '';
countries: Array<string> = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe");
settings: jqwidgets.InputOptions =
{
placeHolder: "Antarctica",
height: 25,
width: 200,
items: 3,
minLength: 1,
source: this.countries
}
}

When we type inside the input field the country variable is automatically updated.
Let`s take a look:

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:


import { NgModule }       from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { jqxInputComponent } from 'components/angular_jqxinput';
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent, jqxInputComponent],
bootstrap: [AppComponent]
})
export class AppModule { }

If you won't be using the Two Way Data Binding , remove the ngModel and all it`s needed code from the
relevant angular_xxxx.ts file:

// From:
@Component({
selector: 'angularInput',
template: '<input type="text" [(ngModel)]="ngValue">',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
// To:
@Component({
selector: 'angularInput',
template: '<input type="text">'
})
Otherwise you will get the following error:
Can`t bind to `ngModel` since it isn`t a known property of `angularWidgetName`.

jQWidgets
  • Facebook
  • Twitter
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2025. All Rights Reserved.