Calling a method in an angular Component from an external JS file

I am developing an e-learning application that plays SCORM content. I'm fairly new to angular and scorm. I'm using angular 4 and spring boot. I am facing difficulty in exposing the backend API to the SCORM content.

These are what I have tried so far:

The below code view-course-content.ts has all the 8 SCORM methods that the SCO will invoke from a javascript file inorder to communicate with the LMS.

view-course-content.component.ts

import { Component, OnInit, HostListener,ElementRef } from '@angular/core';
import {Router, ActivatedRoute, Params} from '@angular/router';
import { LaunchService } from '../services/launch-service.service';
import { DataService } from '../services/data.service';
import { DomSanitizer } from '@angular/platform-browser';
import { ApiService } from '../services/api.service';
import { ViewChild } from '@angular/core';
//import { IndexComponent } from './../index/index.component'




@Component({
  selector: 'app-view-course-content',
  templateUrl: './view-course-content.component.html',
  styleUrls: ['./view-course-content.component.css']
})
export class ViewCourseContentComponent implements OnInit {

  pdfUrl;
  courseId;
  API;
  formData = new FormData();
  pdfSrc;
  api = 'http://localhost:8080';



  @ViewChild('API_1484_11') API_NN;
  @ViewChild('API') API_IE;
   @ViewChild('APIHOLDER') APIHOLDER;

  debug = true;




 constructor(private activatedRoute: ActivatedRoute, private dataService: DataService, private launchService: LaunchService, private _sanitizer: DomSanitizer, private apiService : ApiService,private elementRef: ElementRef) {
   console.log('Unit Id in viewCourse', this.dataService.unitId);  
  this.activatedRoute.params.subscribe((params: Params) => {
       this.courseId = params['id'];
      this.formData.append('courseId', params['id']);
      console.log(this.courseId);
    });
   }

  ngOnInit() {
    this.scormAPI = this._sanitizer.bypassSecurityTrustResourceUrl('assets/js/api.js');


  }


//------------------------------------------
//SCORM RTE Functions - Initialization
//------------------------------------------
Initialize(dummyString) { 
  console.log("Inside Initialize() function");
if (this.debug) { alert('*** LMSInitialize ***'); }
console.log("Inside Initialize() function");
//return this.API_1484_11.Initialize();
// return "true";

this.apiService.initialize().subscribe((response) => {
      console.log('Inside apiService Initialize call in view-course-component-ts ');
     // console.log("Response inside view course content", response['_body']);
})

}

//------------------------------------------
//SCORM RTE Functions - Getting and Setting Values
//------------------------------------------
GetValue(varname) {
if (this.debug) { 
 alert('*** LMSGetValue varname='+varname
                       +' varvalue=value ***');
}


}

LMSSetValue(varname,varvalue) {
if (this.debug) { 
 alert('*** LMSSetValue varname='+varname
                       +' varvalue='+varvalue+' ***');
}
}

 LMSCommit(dummyString) {
if (this.debug) { alert('*** LMSCommit ***'); }
return "true";
}

//------------------------------------------
//SCORM RTE Functions - Closing The Session
//------------------------------------------
LMSFinish(dummyString) {
if (this.debug) { alert('*** LMSFinish ***'); }
return "true";
}

//------------------------------------------
//SCORM RTE Functions - Error Handling
//------------------------------------------
LMSGetLastError() {
if (this.debug) { alert('*** LMSGetLastError ***'); }
return 0;
}

LMSGetDiagnostic(errorCode) {
if (this.debug) { 
 alert('*** LMSGetDiagnostic errorCode='+errorCode+' ***');
}
return "diagnostic string";
}

LMSGetErrorString(errorCode) {
if (this.debug) { 
 alert('*** LMSGetErrorString errorCode='+errorCode+' ***'); 
}
return "error string";
}

}

The below code actually launches the SCORM content. I have put it in a frameset.

view-course-content.component.html

<script type="text/javascript"
  src="assets/runtime/BrowserDetect.js"></script>
    <!-- <script type="text/javascript"
    src="assets/js/SCORM_API_wrapper.js"></script>   -->
     <script type="text/javascript"
    src="assets/js/scormAPI.js"></script>
<div>  


   <div align="center"> View Course Content Page </div> 

     <div id="scormContent" *ngIf = "unitId == 2">

         <frameset frameborder="0" border="0" rows="0,*" cols="*" >


    <frame 
        src="assets/CourseImports/shared/launchpage.html"
        name="Content" id="Content" marginwidth="1px;" marginheight="1px;" noresize="noresize"></frame>



    </frameset>

The courses are launched from the dashboard.

dashboard.component.html

<div class="container-fluid dashboard">
    <div class="row ">


        <h1 class="page-header page-heading animated fadeInDownBig">
            Courses<small></small>
        </h1>



        <div class="col-md-3 col-sm-6" *ngFor='let course of courses'>

            <div class="widget widget-stats bg-aqua-lighter">
                <div class="stats-icon">
                    <i class="fa fa-desktop:before"></i>
                </div>
                <a target="_blank" href="javascript:void(0);"
                    (click)="viewCourse(course.courseId)">

                    <div class="img-hover">
                        <img src="api/admin/getCourseCoverImage{{course.courseId}}"
                            id="coverImage" alt="HTML5 Image" height="70px" width="120px"
                            class="img-responsive img-rounded" />
                    </div>
                </a>

                <div class="stats-info">
                    <!-- <p id="testId_${publishedTestSurvey.testDetails.testId}">${publishedTestSurvey.testDetails.testName}</p>
                                        <h4>${fn:length(publishedTestSurvey.testDetails.testQuestionDetailsSet)}
                                            questions | ${publishedTestSurvey.testDetails.duration}
                                            Minutes | ${publishedTestSurvey.testDetails.testRepetitions}
                                            Total Attempts</h4> -->
                    <p>{{course.courseName}}</p>
                    <div class="stats-link">
                        <!-- <a target="_blank" href="view-course/{{course.courseId}}" (click)="viewCourse(course.courseId)">  
                                                Open Course <i class="fa fa-arrow-circle-o-right"></i>
                                            </a> -->
                        <!-- <a target="_blank" href="javascript:void(0);" (click)="viewCourse(course.courseId)">  
                                                Open Course <i class="fa fa-arrow-circle-o-right"></i>
                                            </a> -->
                    </div>
                </div>
            </div>
        </div>

    </div>    
</div>

These are the calls that the SCO will make to communicate with the LMS

API.Initialize()
API.SetValue()
API.GetValue()
API.Terminate()
API.GetLastError()
API.GetErrorString()
API.GetDiagnostic()

I haven't been able to figure out how to expose the SCORM methods in view-course-content.ts to the above js calls that the SCORM content will be making.

view-course-content.ts is my Javascript API that needs to be called. How can I capture the calls made by the js file and redirect it to the methods in view-course-content.component.ts? I have no control whatsoever on the js file that is making these calls.

Any help will be highly appreciated! Thanks.