Angular Semi Knob not working

[alnajar85Participant]

Hi,
I was testing Angular Semi Knob with my current Angular12 application and can’t get it work, below is the console error I’m seeing, this is a demo example nothing was changed from example code, please advice.

ERROR Error: Uncaught (in promise): Error: inject() must be called from an injection context
Error: inject() must be called from an injection context
at injectInjectorOnly (core.js:4752)
at ɵɵinject (core.js:4762)
at Module.ɵɵdirectiveInject (core.js:14741)
at NodeInjectorFactory.jqxKnobComponent_Factory [as factory] (jqwidgets-ng-jqxknob.js:331)

[Yavor DashevParticipant]

Hi alnajar85,

I would like to ask you to create a code example which reproduces the issue so that we could be able to give you a viable solution for it, because when I tested the semi jqxKnob everything worked as intended.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/

[alnajar85Participant]

Hi Yavor,
what would be best way to share the code? I won’t be able to create the problem on stackblits because my application is based of multiple components and services architecture. I can share a zip file of the application if that ok?
the knob will be displayed on a separate component which of child of the app.module. I tried creating the semi knob on new application following the demo and work on its own but not able to create it in large application.
please advice best practice to use the library on complex application.

[Yavor DashevParticipant]

Hi alnajar85,

You can share the code example via github repository or zipped fiile if those options are suitable for you!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/

[alnajar85Participant]

Hi Yavor,
thanks for your response, I added the zip package to repo below
https://github.com/salnajar1/dashboard1.git

the knob is added in the component as follow
src\modules\charts\components\charts-bar

Thanks

[alnajar85Participant]

Hi Yavor,
following up with the link above if you were able to review the code and weather its possible to implement the knob component and call it from outside the root app?

greatly appreciated

[Yavor DashevParticipant]

Hi alnajar85,

Thank you for the code example, but we don’t review such a huge amounts of code.

I will try a similar scenario as yours and I will try to reproduce the issue the same way as you do.

However in the mean time you can also simplify the code example and also to take a look at this documentation:
https://www.jqwidgets.com/angular-components-documentation/documentation/angular-dynamic-components/index.htm

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/

[iwagnerParticipant]

I’m running into the same issue with jqxknob since upgrading to Angular 13.0.1, it was working for version 12.2.3. Still testing before buying a license.

[alnajar85Participant]

Hi,
I was able to resolve the issue, but not sure if this is the best solution but works so far. I added the following in the tsconfig.app.json under ComplierOption

“paths”: { “@angular/*”: [ “./node_modules/@angular/*” ] },

now my current issue is resizing the knob to fit within a certain component, but seems like circle taking 360 degree all around, how can I control the upper portion of the knob of <jqxKnob>`

[iwagnerParticipant]

I tried your fix and that does not work in my case. Hopefully someone looks into this issue.

[iwagnerParticipant]

Mine looks like this with an opening at the bottom ..

<!– KNOB –>
<div id=”knob-container”>
<jqxKnob height=”250″ width=”250″ #myKnob (onChange)=”onChange($event)” [value]=”startValue”
[min]=”minValue” [max]=”maxValue” [startAngle]=”120″ [endAngle]=”420″ [snapToStep]=”false”
[rotation]=”‘clockwise'” [style]=”style” [marks]=”marks” [labels]=”labels”
[progressBar]=”progressBar” [pointer]=”pointer” [disabled]=”false”>
</jqxKnob>

style: any =
{
stroke: ‘#dfe3e9’, strokeWidth: .5,
fill: {
color: ‘#fefefe’, gradientType: “linear”,
gradientStops: [[0, 1], [50, 0.9], [100, 1]]
}
};
marks: any =
{
colorRemaining: { color: ‘grey’, border: ‘grey’ },
colorProgress: { color: ‘#00a4e1’, border: ‘#00a4e1’ },
type: ‘line’, offset: ‘71%’, thickness: 3, size: ‘4%’,
majorSize: ‘6%’, majorInterval: 1, minorInterval: .5
};
labels: any =
{
offset: ‘88%’,
step: 1,
visible: true
};
progressBar: any =
{
style: { fill: ‘#00a4e1’, stroke: ‘grey’ },
size: ‘9%’, offset: ‘60%’,
background: { fill: ‘grey’, stroke: ‘grey’ }
};
pointer: any =
{
type: ‘arrow’, style: { fill: ‘#00a4e1’, stroke: ‘grey’ },
size: ‘59%’, offset: ‘49%’, thickness: 20
};

[ivanpeevskiParticipant]

Hi alnajar85,

You can easily resize the Knob by setting the widthand height properties as a percentage of the container element.
Please, have a look at the example here: https://stackblitz.com/edit/github-ylewon?file=src/app/app.component.html
I hope this will be of help!

If you have any other questions, please do not hesitate to contact us again.

Best regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevskiParticipant]

Hello iwagner,

The issue seems to come from the setup of the Angular Application, rather than the Knob element.

Another possible solution would be to navigate to the angular.json file of your project and set
projects.$projectName.architect.build.options.preserveSymlinks to true.

If the problem continues, please contact us again by sending us a code example of the application, so that we can reproduce the issue and help you fix it.

Best regards,
Ivan Peevski
jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts