So I have a much better understanding of using GoJS Radial Template with Angular 2 (Typescript) as I already have a Repository for Reference displaying the same example.
Currently the rendering happens with ngAfterViewInit() which might be good for static applications where the diagram does not use Input from, say, Backend Server. However, I need some help in getting the layout to render with ngOnChanges(). I currently have a none committed code where the the layout gets rendered after some API calls.
Problem
The first time the app fires, and user searches a keyword and gets data from the API and after a few clicks the diagram gets displayed. However, when the user searches something new and the values get passed to the Angular Component there is a zone.js error which I cannot understand at all.
Does one have to call the init() function in the source code everytime the image needs to be rendered? I understand that the generateGraph() is called within the init() function, but is there a way to just initialize the diagram first and then generate the Graph?
usually if I do call the init() without the generateGraph() it will show vertex error.
I don’t know which init() function you are talking about. Do you mean those defined in most of the samples? In those case the init() function is defined in order to make sure that the diagram initialization only happens after the HTML DIV elements exist.
Yes, it’s certainly the normal and expected scenario that the diagram be initialized and then later there are changes to it, either by the user interactively or by code programmatically. That code could be invoked by the user (such as when the user clicks an HTML button) or by your code (such as due to some event).
Whenever you make changes to the model or to the diagram, you should do so within a transaction.
I’m not sure that I can help you with figuring out how to use Angular. Sorry. Some day I’ll become more familiar with it.
Finally I figured it out. It was the {layout: $(RadialLayout, maxLayers: 2)} call that was crashing the code. I declared the nodeTemplate and linkTemplate with the ngAfterViewInit() Lifecycle Hook and removed the layout attribute to be generated on ngOnChanges() Lifecycle Hook. This means that every time a new data comes from the parent component the Layout is defined exclusively with this.myDiagram.layout and data is manifested beautifully.
I have a plunker for the same However I just need to get the Root Node to look like the one in the example.