Angular2 Support

We’re evaluating this library, primarily to develop interactive flowcharts. I have created some basic digrams and so far they meet our needs.

However we’re going to use Angular2 to build out our app, and I’m wondering what level of interactivity is supported between angular2 events and the GoJS diagrams. For instance, we’ll want to build something out like this:

  1. User clicks (or maybe hovers on node)
  2. Angular2 opens modal window
  3. User interacts with modal, makes a decision that adds a node to the GoJS chart (or deletes one etc)
  4. Modal closes
  5. New GoJS chart state is presented to user.

Does GoJS support this back and forth interactivity between the GoJS diagram data model and the outside js world that angular2 events would live? If the GoJs chart data changes does GoJS redraw the entire diagram?

I know i can invoke Angular2/Typescript functions from GoJS event listeners, I’ve implemented this on one GoJS chart:

 myDiagram.addDiagramListener("ObjectSingleClicked", (e:any) => {

goJsClicked(e: any) {
    let part = e.subject.part;
    if (!(part instanceof go.Link)) {
        this._router.navigate(['/Decision', this.cpmId,]);

The GoJs event listener invoked the goJSClicked Angular2 Component function just fine and navigates to a new angular2 route. Is this the desired pattern for invoking Angular2 component functions from GoJs events?

Does your full blown version contain typescript definitions and export ES6 modules?

Yes, you can implement event listeners either at the Diagram level, by adding DiagramEvent listeners to the Diagram, or at the level of individual objects in the diagram, by setting GraphObject event handlers. Read more at GoJS Events -- Northwoods Software.

GoJS does not constantly scan memory looking for state changes, so it is incumbent on your app to notify GoJS about such changes to the objects held in the Model.nodeDataArray or GraphLinksModel.linkDataArray. Normally that is done by calling Model methods to perform those changes. A much less efficient method that you can use if you have no control over how the data objects are modified is to call Diagram.updateAllRelationshipsFromData and Diagram.updateAllTargetBindings within a transaction.

Yes, GoJS has had a TypeScript definition file since the summer of 2013. It is available right alongside the libraries themselves, for example at Note that the package.json file for GoJS has a typings reference to that file.

So to add a node someone would do

  myDiagram.startTransaction("make new node");
  myDiagram.model.addNodeData({ key: "Omega" });
  myDiagram.commitTransaction("make new node");

And thats all? No call to redraw the diagram?

You probably don’t even need to specify the key.

Of course in your app you probably have various properties that you want to set…

Sure, outstanding. It doesn’t seem like adding nodes causes a diagram to jitters either, I think this will be sufficient for our needs. we can have anugular monitor the data state, and update the GoJs Model when it detects changes that should be reflected in the graph.

There is no way to break out node, group, or link templates into separate Angular2 components or directives at the moment is there?

They are all just instances of JavaScript classes – no HTML DOM or CSS.

Could you be specific about how you were thinking Nodes and Links would be used that would warrant becoming Angular components?

Well typically you want to break out reusable markup and behaviors into components or just behaviors into directives in Angular2.

Being that GoJs renders into canvas, i doubt it’s likely that GoJs could break out nodes, groups, or links into components or directives. It just seems anti angular to me to define how a node should look outside the constructs of a component and view template, but because this is such a specific use case ( drawing canvas diagrams) it seems to make sense.

If GoJs rendered in SVG, it probably makes more sense to break down nodes, groups, and links into components/directives because you can emit svg in Angular2 view templates.

But yeah I see that it’s pretty much impossible to use components or directives in this fashion being the end result is rendered to canvas.

It’s not just Canvas. GoJS also renders to SVG (Diagram.makeSvg), but we expect to support rendering to other drawing environments in the future.

Interesting, if GoJs can emit SVG it seems that it would be possible to support Angular2 components to define GoJs object templates. I’ve been playing around with svg components in angualr2 and it works, the only downside is you have to manully position everything.

Angular2 SVG