Using this within Angular

[mbabatunde]

Has anyone been able to integrate this within their angular7 web app?

I was able to import and link everything, but the panzoom button is not appearing for me.

I've done something like the following in one component:

import cytoscapePanzoom from "cytoscape-panzoom";
import * as $ from "jquery/dist/jquery.min.js";

...

cytoscapePanzoom(cytoscape, $);
cy.panzoom(defaults); // defaults from the README

I added the css files (font-awesome and cytoscape-panzoom ones) within the index.html

Is there something else I'm missing?

[JeevanPrasad]

were you able to get this working?

[mbabatunde]

No solution at the moment

[DarioDemix]

Hi, I've successfully integrated cytoscape-panzoom in an Angular (v.11/12) application.

The steps to make it works are:

• declare the variable require, which is a function, to import the plugin via CommonJS

  declare var require: any

  this function is provided by webpack which is built-in in Angular;

• require cytoscape-panzoom in your component

  const cytoscapePanzoom = require('cytoscape-panzoom');

  • at this point the plugin works, but it doesn't see its CSS. This can be solved by exposing the .css files in angular.json

    "styles": [
          "src/styles.css",
          "./node_modules/cytoscape-panzoom/font-awesome-4.0.3/css/font-awesome.min.css",
          "./node_modules/cytoscape-panzoom/cytoscape.js-panzoom.css"
        ],

  • the remaining configuration (like registering the plugin) is the same.

For any doubt I created a simple repository in my GitHub:

cytoscape-panzoom-in-angular

---

Result

[DiligentTuolaji]

Hi, I've successfully integrated cytoscape-panzoom in an Angular (v.11/12) application.

The steps to make it works are:

• declare the variable require, which is a function, to import the plugin via CommonJS

declare var require: any

this function is provided by webpack which is built-in in Angular;

• require cytoscape-panzoom in your component

const cytoscapePanzoom = require('cytoscape-panzoom');

• at this point the plugin works, but it doesn't see its CSS. This can be solved by exposing the .css files in angular.json

  "styles": [
              "src/styles.css",
              "./node_modules/cytoscape-panzoom/font-awesome-4.0.3/css/font-awesome.min.css",
              "./node_modules/cytoscape-panzoom/cytoscape.js-panzoom.css"
            ],

• the remaining configuration (like registering the plugin) is the same.

For any doubt I created a simple repository in my GitHub:

cytoscape-panzoom-in-angular

Result

[DiligentTuolaji]

Why use require in frontend code? I can confirm this package does not work by the way "Import"