ng2-cytoscape
Example Usage
In your app.module.ts
Add the import clause to import the module NgCytoscapeModule
import {NgCytoscapeModule} from "ng2-cytoscape/dist";
Add the NgCytoscapeModule
to the imports array of the NgModule
.
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, NgCytoscapeModule // <= Add this ], providers: [], bootstrap: [AppComponent]})export class AppModule { }
In the component you want to use NgCytoscape
import {Component} from '@angular/core'; @Component({ selector: 'graph', template: '<ng2-cytoscape [elements]="graphData"></ng2-cytoscape>', styles: [` ng2-cytoscape { height: 100vh; float: left; width: 100%; position: relative; }`],})export class Graph { graphData = { nodes: [ {data: {id: 'j', name: 'Jerry', faveColor: '#6FB1FC', faveShape: 'triangle'}}, {data: {id: 'e', name: 'Elaine', faveColor: '#EDA1ED', faveShape: 'ellipse'}}, {data: {id: 'k', name: 'Kramer', faveColor: '#86B342', faveShape: 'octagon'}}, {data: {id: 'g', name: 'George', faveColor: '#F5A45D', faveShape: 'rectangle'}} ], edges: [ {data: {source: 'j', target: 'e', faveColor: '#6FB1FC'}}, {data: {source: 'j', target: 'k', faveColor: '#6FB1FC'}}, {data: {source: 'j', target: 'g', faveColor: '#6FB1FC'}}, {data: {source: 'e', target: 'j', faveColor: '#EDA1ED'}}, {data: {source: 'e', target: 'k', faveColor: '#EDA1ED'}}, {data: {source: 'k', target: 'j', faveColor: '#86B342'}}, {data: {source: 'k', target: 'e', faveColor: '#86B342'}}, {data: {source: 'k', target: 'g', faveColor: '#86B342'}}, {data: {source: 'g', target: 'j', faveColor: '#F5A45D'}} ] }; constructor() { } }