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. stackoverflow.com/questions/47346559/… — Bijay Yadav
– Bijay Yadav, Commented Feb 5, 2019 at 3:56
as pointed out it`s a duplicate also why would you use jquery in angular? any specific reason for that? — Manit
– Manit, Commented Feb 5, 2019 at 4:08
Don't use jquery in angular. Choose one framework or the other — Our_Benefactors
– Our_Benefactors, Commented Feb 5, 2019 at 4:09
Possible duplicate of using external JS libraries in my angular 2 project — adiga
– adiga, Commented Feb 5, 2019 at 4:39

Hameed Syed · Accepted Answer · 2019-02-06 06:20:54Z

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

Dhananjai Pai · Accepted Answer · 2019-02-05 03:58:33Z

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 5, 2019 at 3:58

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

Comments

brk · Accepted Answer · 2019-02-05 04:03:47Z

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 5, 2019 at 4:03

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Daniel · Accepted Answer · 2019-02-05 04:09:37Z

0

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.

answered Feb 5, 2019 at 4:09

Daniel

2861 gold badge2 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to Use External Javascript in TypeScript Angular

index.component.ts

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

index.component.ts

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related