i have created angular 2 +asp.net core project, and created a new NG2 component, i'm trying to include one of metronic jquery components in the NG2 component with no luck, i have done the following:
- added the component through npm: npm install easy-pie-chart --save
- in the component.ts added: import * as $ from 'jquery'; import 'easy-pie-chart';
- inside ngAfterViewInit added: $('.easy-pie-chart .number.transactions').easyPieChart({ animate: 1000, size: 75, lineWidth: 3, barColor: App.getBrandColor('yellow') });
im getting many errors and unable to complete it at all, please help
9 Answer(s)
-
0
Hi,
Can you share the screenshot of errors ?
Thanks.
-
0
after adding "declare var $: any" to the .ts file to bypass typescript, i'm getting the below error:
<a class="postlink" href="https://www.dropbox.com/s/gnwlymjvqbsgd9o/Capture.JPG?dl=0">https://www.dropbox.com/s/gnwlymjvqbsgd ... e.JPG?dl=0</a>
please help
-
0
Hi,
Have you added easy-pie-chart script to angular-cli.json ?
-
0
Yes, i have added it under "scripts": section like this:
"../src/assets/plugins/jquery-easypiechart/jquery.easypiechart.js",
and still getting the same error.
please help.
-
0
is there a some guide how to include metronic components (since most of it is based on jquery) or any jquery components in general in aspnet zero client project ? i see there is many coomponents are already used like jTable but can't find out the steps to do that.
-
0
problem solved after killing the NG process in terminal and running npm start again.
Thank you very much, however there are some questions arised now:
is it required to use "declare var $: any" or no ? i noticed after commenting it the application still works, even TS is compiling normally
adding the file manually to .angular-cli.json is the way when the plugin is not available on NPM catalog, right ?
Thank you again, your support is highly appreciated.
-
0
Hi @malomatia,
I think "declare var $: any" is not necessary. We declare such typings in this file <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/src/typings.d.ts">https://github.com/aspnetzero/aspnet-ze ... pings.d.ts</a> for the libraries which don't have typing files.
For example we defined slimscroll typing like this
interface JQuery { slimScroll(...any): any; }Yes, you need to include script paths to .angular-cli.json even if they exist in npm.
-
0
Thanks a lot (Y)
-
0
You are welcome :)
