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

There is library for loading asynchronous JavaScript files. https://www.npmjs.com/package/scriptjs

Install the package:

npm i scriptjs

Then use it anywhere like below:

import { get } from 'scriptjs';

ngOnInit() {

    get("assets/js/searchEmp.js", () => {
        getSerchInspContext = this;
        loadSearchEmp();
    });}`

OR

You can simply use the jquery method to append or remove the script tag in your header.

To add .js file, call below line under ngOnInit():

$('head').append('<script async src="assets/js/search.js"></script>');

Remove .js file:

document.querySelector('script[src="assets/js/search.js"]').remove();

Answer 2

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,OnInit } from '@angular/core';
import * as bubble from './assets/js/bubble';
declare var bubble: any;
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage  implements OnInit{

    ngOninit(){
        bubble();
        }
}

bubble.js Code

var bubble = (function(){
    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 };
})

Answer 3

As from @sivakumar Answer i get some tips to use the .js file

home.html code :

<ion-header>
  <ion-toolbar>
    <ion-title>
      Music Bubble
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div id="bubbles">
  </div>
</ion-content>

home.ts code :

import { Component, OnInit } from '@angular/core';
declare var bubble: any;

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

  constructor() {
  }

  ngOnInit(): void {
    bubble();
  }
}

bubblefile.js code:

var bubble = (function(){
    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);
        }
    });
})

Answer 4

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";