When the User clicks a button inside the , how do I save the PDF being annotated in the ?

Question

The parent.component.html basically looks like this:

<div> 
    <gc-viewer> </gc-viewer> 
    <childComponent (checklistApproved)="checklistApproved($event)" > </childComponent> 
</div> 

In the parent.component.ts , I tried creating this:

 @ViewChild(GcViewerComponent, { static:   false }) childRefGC:  GcViewerComponent     

And then inside parent.component.ts , inside checklistApproved($event) , I called

this.childRefGC.saveChanges();      


 

//saveChanges is defined in gc-viewer.component.ts and looks like this:

saveChanges() { 
 console.log('in saveChanges'); 
 this.viewer.saveChanges().then(function
(result) { 
 if (result) { 
 // Load saved document from server 
 var docUrl =
"api/pdf-viewer/GetPdfFromCloud?docName=/GetPdfFromCloud?docName="myNewPDF"
+ new Date().getTime() + '.pdf' + '&clientId=' +
this.viewer.supportApi.clientId; 
 this.viewer.open(docUrl).then(function () { 
 console.log('in viewer.open'); 
 alert('The document is saved in
the cloud. The service life of the document is 10 minutes.'); 
 }); 
 } 
 }); 
 console.log('out saveChanges()'); 
} 

In the console, I can see these 2 lines

console.log('in saveChanges'); 
 console.log('out saveChanges()');

But I never see this one

 console.log('in viewer.open'); 

There is an error in the console saying "Can't create multiple instances of GcPdfViewer class"