Use .js file in ionic 4

Question

I am new to ionic, I want to use .js file in one page

I have a .js file which is create bubble in canvas,

What I want to do is, want to use that .js file in my ionic 4 project and show bubble on my home page.

Here is the Link for that codepen which I want to use

I had created file in 'assets/js/bubblefile.js' but I don't know how to use 'bubblefile.js' file in my home.html or home.ts? Below is my code.

Edited

home.html Code :

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <script src="assets/js/bubblefile.js"></script>

</ion-content>

home.ts Code

import { Component } from '@angular/core';
import './assets/js/bubblefile';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

}

bubblefile.js Code

var nodes = new vis.DataSet([
    {label: "Pop"},
    {label: "Alternative"},
    {label: "Rock"},
    {label: "Jazz"},
    {label: "Hits"},
    {label: "Dance"},
    {label: "Metal"},
    {label: "Experimental"},
    {label: "Rap"},
    {label: "Electronic"},
]);
var edges = new vis.DataSet();

var container = document.getElementById('bubbles');
var data = {
    nodes: nodes,
    edges: edges
};

var options = {
    nodes: {borderWidth:0,shape:"circle",color:{background:'#F92C55', highlight:{background:'#F92C55', border: '#F92C55'}},font:{color:'#fff'}},
    physics: {
        stabilization: false,
        minVelocity:  0.01,
        solver: "repulsion",
        repulsion: {
            nodeDistance: 40
        }
    }
};
var network = new vis.Network(container, data, options);


// Events
network.on("click", function(e) {
    if (e.nodes.length) {
        var node = nodes.get(e.nodes[0]);
        // Do something
        nodes.update(node);
    }
});
export { nodes, edges, container, data, options, network };

Structure of Project

Any help or suggestion will be appreciated,

Thanks

Answer 1

If you want to use it in a HTML file:

<script src="assets/js/bubblefile.js"></script>

if you want to use it in a JavaScript/TypeScript file:

Add this to the bottom of your bubblefile.js:

export { nodes, edges, container, data, options, network };

At the top of the file you want to use it in:

import "./assets/js/bubblefile";