How to call javascript on angular 2

Question

I have javascript file from assets/js/chartrank.js

chartrank.js

function chartRank() {
    // do something
}

and call a function defined in it on rankuser component but it doesn't work.

rankuser.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import "../../assets/js/chartrank.js";
declare var jsObject: any;

@Component({
  selector: 'app-rankuser',
  templateUrl: './rankuser.component.html',
  styleUrls: ['./rankuser.component.css']
})
export class RankuserComponent implements OnInit, AfterViewInit {

  constructor() { }

  ngAfterViewInit() {
    jsObject.chartRank();
  }

  ngOnInit() {

  }
}

ERROR

ERROR ReferenceError: jsObject is not defined

Please help.

Try doing import * as jsObject from "../../assets/js/chartrank.js" — Shah
– Shah, Commented Mar 28, 2018 at 1:32

Pengyy · Accepted Answer · 2018-03-28 02:39:12Z

7

import doesn't work here because chartrank.js doesn't export anything.

The simplest way here is adding chartrank.js to .angular-cli.json's scripts array, and declare the chartRank(function name) as a global variable.

.angular-cli.json

"scripts": [
  "./assets/js/chartrank.js"
],

component or service

declare var chartRank: any;

@Component({
  ...
})
export class RankuserComponent implements OnInit, AfterViewInit {

  ...

  ngAfterViewInit() {
    chartRank();
  }
}

answered Mar 28, 2018 at 2:39

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brk · Accepted Answer · 2018-03-28 01:34:09Z

0

Create a module with @Injectable decorator like this

import {Injectable} from "@angular/core";
@Injectable()
export class MyClass{

  constructor() {}

  chartRank() {
    // do something
   }
}

Then in component

import { Component, OnInit, AfterViewInit } from '@angular/core';
import {MyClass} from "..myClass"
declare var jsObject: any;

@Component({
  selector: 'app-rankuser',
  templateUrl: './rankuser.component.html',
  styleUrls: ['./rankuser.component.css']
})
export class RankuserComponent implements OnInit, AfterViewInit {

  constructor(private mc:MyClass) { }

  ngAfterViewInit() {
    mc.chartRank();
  }

  ngOnInit() {

  }
}

answered Mar 28, 2018 at 1:34

brk

50.3k10 gold badges59 silver badges85 bronze badges

Collectives™ on Stack Overflow

How to call javascript on angular 2

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related