How to Use External Javascript in TypeScript Angular

Question

I want to use jquery and easypiechart js file's functions in typescript.

It doesn't work this way.

How to define these script what i specified in code as typescript ?

index.component.ts

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

import * as $ from "../../../../../assets/plugins/jquery/jquery.min.js";
import { easyPieChart } from "../../../../../assets/plugins/easypiechart/jquery.easypiechart.min.js";

// these above 2 js files are defined in angular.json script section

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

export class IndexComponent implements OnInit {

  constructor() {}

  ngOnInit() {

    //$(function(){
    //  $('.easypiechart').easyPieChart();
    //});

    // How to write this above script as typescript ?????????????????????

  }
}

This looks `dublicate` of this. https://stackoverflow.com/questions/47346559/how-to-call-external-java-script-function-in-angular-5 — Bijay Yadav, Feb 05 '19 at 03:56
as pointed out it`s a duplicate also why would you use jquery in angular? any specific reason for that? — Manit, Feb 05 '19 at 04:08
Don't use jquery in angular. Choose one framework or the other — Our_Benefactors, Feb 05 '19 at 04:09
Possible duplicate of [using external JS libraries in my angular 2 project](https://stackoverflow.com/questions/41120754/using-external-js-libraries-in-my-angular-2-project) — adiga, Feb 05 '19 at 04:39

score 2 · Answer 1 · answered Feb 05 '19 at 03:58

2

If you have included them in the scripts or index.html, you don't have to import them to the .TS file again

Use declare instead and it should work What does 'declare' do in 'export declare class Actions'?

answered Feb 05 '19 at 03:58

Dhananjai Pai

5,914
1
10
25

Hameed Syed · Accepted Answer · 2019-02-06T06:20:54.097

From the above question,it looks like jquery.easypiechart.min.js is the one that you need to use in your angular application as external js.

Put the js under assets folder say /assets/js/jquery.easypiechart.min.js
Goto your projects angular.json file and under scripts node of architect node put as an entry in the array.

"scripts": [ "./node_modules/jquery/dist/jquery.min.js",
"./src/assets/js/jquery.easypiechart.min.js" ]

Now you can refer the external js in any of your projects components

  declare var $: any;// referencing jQuery library
    @Component({
      selector: 'app-index',
      templateUrl: './index.component.html',
      styleUrls: ['./index.component.scss']
    })

    export class IndexComponent implements OnInit {
      constructor() {}
      ngOnInit() {
      $(document).ready(function () {
          //accessing easypiechart.min.js.
          $('.easypiechart').easyPieChart();
         });
      }
    }

score 0 · Answer 3 · answered Feb 05 '19 at 04:03

0

Instead of putting it in asset folder you should use it as node_modules dependency

For easy pie chart run this npm i easy-pie-chart --save & for jquery run npm i jquery

answered Feb 05 '19 at 04:03

brk

48,835
10
56
78

score 0 · Answer 4 · answered Feb 05 '19 at 04:09

Normally you don't want to use jquery in Angular, because it usually implies to modify directly the DOM, which is a bad practice, but there is the way to do it: https://medium.com/all-is-web/angular-5-using-jquery-plugins-5edf4e642969

If you wanna plot a pie chart or other types of charts, you could use ng2-charts instead, it will allow you to use charts.js with Angular and Typescript.

How to Use External Javascript in TypeScript Angular

index.component.ts

4 Answers4