How to include jq widgets in angular 2 project

[praneethParticipant]

I am trying to include jq widgets in my project but i did not found the right way to do it.Should I go with npm or down;load an include folder.Can any one please help.Thanks.

[StanislavParticipant]

Hello praneeth,

You can download it from our web site and then put this two folders in the main directory of your project:
jqwidgets
jqwidgets-ts

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[praneethParticipant]

Hi Stanislav,
I included the 2 folders and some .js files in index.html it worked but when i run the project again it shows lots of error like this

src/app/grid/jqwidgets-ts/angular_jqxbargauge.ts(308,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxbulletchart.ts(276,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxbuttons.ts(280,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxcalendar.ts(530,8): error TS7006: Parameter ‘date’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxcalendar.ts(530,14): error TS7006: Parameter ‘date2’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxcalendar.ts(531,11): error TS2663: Cannot find name ‘value’. Did you mean the instance member ‘this.value’?
src/app/grid/jqwidgets-ts/angular_jqxcheckbox.ts(291,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxcombobox.ts(658,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxcomplexinput.ts(288,11): error TS2663: Cannot find name ‘value’. Did you mean the instance member ‘this.value’?
src/app/grid/jqwidgets-ts/angular_jqxdatetimeinput.ts(503,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxdatetimeinput.ts(503,15): error TS7006: Parameter ‘value2’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxdropdownlist.ts(609,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxeditor.ts(272,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxformattedinput.ts(360,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxgauge.ts(335,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxgrid.ts(100,27): error TS2300: Duplicate identifier ‘attrLocalization’.
src/app/grid/jqwidgets-ts/angular_jqxgrid.ts(696,4): error TS2393: Duplicate function implementation.
src/app/grid/jqwidgets-ts/angular_jqxgrid.ts(896,4): error TS2393: Duplicate function implementation.
src/app/grid/jqwidgets-ts/angular_jqxinput.ts(324,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxknob.ts(343,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxlineargauge.ts(345,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxlinkbutton.ts(279,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxlistbox.ts(590,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxmaskedinput.ts(240,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxnavigationbar.ts(321,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxnumberinput.ts(411,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.
src/app/grid/jqwidgets-ts/angular_jqxpasswordinput.ts(284,8): error TS7006: Parameter ‘value’ implicitly has an ‘any’ type.

Its a blocking issue and I am unable to start the project.Can you please help me.Thanks.

[StanislavParticipant]

Hello praneeth,

Thanks for your report, the problem will be fixed in the next update.
For now make this argument of type any(go to the file, find the line it says the error is on, and place a type.)
Example:
Before:
val(value): any {....}
Now:
val(value: any): any {....}

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[steffnParticipant]

Hi,
i am using jQWidgets v4.5.3 (2017-June). But recieve this ERR by including the jqx navigationbar in my project:

ERROR in /home/steffen/WebstormProjects/jqwidgets-ts/jqwidgets.d.ts (14,18): Duplicate identifier 'widget'.

ERROR in /home/steffen/WebstormProjects/TestMenue/node_modules/jqwidgets-framework/jqwidgets-ts/jqwidgets.d.ts (18,18): Duplicate identifier 'widget'.

Could you please help me?
I thought the ERR was fixed by v4.5.3 ?
Thanks!

[steffnParticipant]

Sorry, too stupid.

i solved the issue…
I used the the same typescript file twice.

[Ivo ZhulevParticipant]

Hi steffn,

I recommend updating to jQWidgets latest version.

Regards,
Ivo

[steffnParticipant]

Hi Ivo,
thanks i just updated for the latest version.

But i get this ERR all the time:

ERROR TypeError: a(...)[c] is not a function
    at Object.createInstance (eval at webpackJsonp.5.module.exports (addScript.js:9), <anonymous>:8:17924)
    at jqxDropDownButtonComponent.createComponent (angular_jqxdropdownbutton.ts:111)
    at jqxDropDownButtonComponent.ngOnInit (angular_jqxdropdownbutton.ts:48)
    at checkAndUpdateDirectiveInline (core.es5.js:10834)
    at checkAndUpdateNodeInline (core.es5.js:12330)
    at checkAndUpdateNode (core.es5.js:12269)
    at debugCheckAndUpdateNode (core.es5.js:13130)
    at debugCheckDirectivesFn (core.es5.js:13071)
    at Object.eval [as updateDirectives] (Layer1Component.html:4)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13056)

The Error points on my injector in my app.component.html:

<div>
  <app-layer1></app-layer1>
</div>

And with the layer1 component i want to inject the jqwidget tree.
layer1.component.ts:

import { Component, ViewChild } from '@angular/core';

import { jqxTreeComponent } from '../../../node_modules/jqwidgets-framework/jqwidgets-ts/angular_jqxtree';
import { jqxDropDownButtonComponent } from '../../../node_modules/jqwidgets-framework/jqwidgets-ts/angular_jqxdropdownbutton';

@Component({
  selector: 'app-layer1',
  templateUrl: './layer1.component.html',
  styleUrls: ['./layer1.component.css']
})

export class Layer1Component {
  @ViewChild('myTree') myTree: jqxTreeComponent;
  @ViewChild('myDropDownButton') myDropDownButton: jqxDropDownButtonComponent;

  myTreeOnInitialized(): void {
    this.myDropDownButton.setContent('<div style="position: relative; margin-left: 3px; margin-top: 4px;">Home</div>');
  }

  myTreeOnSelect(event: any): void {
    let item = this.myTree.getItem(event.args.element);
    let dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 4px;">' + item.label + '</div>';
    this.myDropDownButton.setContent(dropDownContent);
  }
}

By debugging in Webstorm i get the Error from this line in the layer1.component.ts:

this.myDropDownButton.setContent('<div style="position: relative; margin-left: 3px; margin-top: 4px;">Home</div>');

Thank you very much!

[Author]

Posts