jQuery UI Widgets Forums Angular Angular Semi Knob not working

Tagged: 

This topic contains 12 replies, has 4 voices, and was last updated by  ivanpeevski 1 year, 2 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • Angular Semi Knob not working #121022

    alnajar85
    Participant

    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)

    Angular Semi Knob not working #121028

    Yavor Dashev
    Participant

    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/

    Angular Semi Knob not working #121034

    alnajar85
    Participant

    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.

    Angular Semi Knob not working #121038

    Yavor Dashev
    Participant

    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/

    Angular Semi Knob not working #121040

    alnajar85
    Participant

    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

    Angular Semi Knob not working #121043

    alnajar85
    Participant

    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

    Angular Semi Knob not working #121046

    Yavor Dashev
    Participant

    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/

    Angular Semi Knob not working #121056

    iwagner
    Participant

    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.

    Angular Semi Knob not working #121057

    alnajar85
    Participant

    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>`

    Angular Semi Knob not working #121058

    iwagner
    Participant

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

    Angular Semi Knob not working #121059

    iwagner
    Participant

    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
    };

    Angular Semi Knob not working #121079

    ivanpeevski
    Participant

    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/

    Angular Semi Knob not working #121080

    ivanpeevski
    Participant

    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

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.