commandHandler events not working in angular 4

I am using angular 4 and integrated goJS with it.

in the diagram-editor.component.ts file i have added following methods.

export class DiagramEditorComponentV2 implements OnInit {

public diagram: go.Diagram = new go.Diagram();

constructor() {
const $ = go.GraphObject.make;
//nodeTemplate,grouptemplate,linktemplate everything is defined here in constructor

out side constructor, other functions defined like this.

copyCommandHandler() {
cutCommandHandler() {
console.log(‘cancut:’ + this.diagram.commandHandler.canCutSelection());
pasteCommandHandler() {
zoomInCommandHandler() {
zoomOutCommandHandler() {
clearCancasCommandHandler() {
undoCommandHandler() {
redoCommandHandler() {

I am calling this function through button click events.

so for example, i have put a button with text zoomIn, which calls method zoomInCommandHandler(). there is no any error is generated but actually it doesnt zoom. any function of commandHandler is not working for me.

Keyboard shortcuts for zoomIn, ZoomOut, Cut,Copy,Paste,Undo,Redo everything is working fine.

how can i fix this ? do let me know if you need any other information,


I assume the keyboard shortcuts are working because the Diagram.commandHandler is handling keyboard events normally, not because of any code that you have written.

Can you confirm that the this.diagram in your methods is in fact referring to the same Diagram instance that is being displayed?

I believe it is, because there is only 1 diagram on this page. And check following screenshot.

I put a breakpoint, and checked it.

You might be seeing only one Diagram on the page, but my question is whether there might be two instances of Diagram: one actually visible and in use, and the other the value of your DiagramEditorComponentV2.diagram.

Thanks, it was issue of multiple instance only.Now its working.