Insert script tag into Angular 4 HTML Component

I am trying to implement the HTML5 version of the PhotoeditorSDK from this website - https://docs.photoeditorsdk.com/guides/html5/v4/introduction/getting_started

I have tried to implement using the Angular Github repo but it would seem that package.json illustrate this only works for Angular 5 & 6 and our app currently is a little outdated being Angular 4.x (and we cannot upgrade to 5 at this time)

Using the HTML5 method is fairly easy in a simple application but within an Angular 4 this seems to be tricky as due to Angular restrictions I am unable to use <script> tags within the component.

In the index <head> I have added the following:

<head>
  <!-- React Dependencies for the SDK UI -->
  <script src="js/vendor/react.production.min.js"></script>
  <script src="js/vendor/react-dom.production.min.js"></script>
  <!-- PhotoEditor SDK-->
  <script src="js/PhotoEditorSDK.min.js"></script>
  <!-- PhotoEditor SDK UI -->
  <script src="js/PhotoEditorSDK.UI.DesktopUI.min.js"></script>
  <link rel="stylesheet" href="css/PhotoEditorSDK.UI.DesktopUI.min.css"/>
</head>

In the template itself there is a simple <div> as follows :

<div id="editor" style="width: 100vw; height: 100vh;"></div>

The script tag itself looks as following - and would basically attach an image that would show within the editor to edit etc..

<script>
  window.onload = function () {
    var image = new Image()
    image.onload = function () {
      var container = document.getElementById('editor')
      var editor = new PhotoEditorSDK.UI.DesktopUI({
      container: container,
      // Please replace this with your license:    https://www.photoeditorsdk.com/dashboard/subscriptions
    license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
    editor: {
      image: image
    },
    assets: {
      // This should be the absolute path to your `assets` directory
      baseUrl: '/assets'
    }
   })
  }
    image.src = './example.jpg'
}
</script>

I am trying to figure out the best way to use <script> above directly within an Angular 4 Component - I know this is best practice but what is the best way to do this?

Solution

Your component has an element with id editor. This will only be available in the ngAfterViewInit hook of the component. Once this is called, the window.onload has been called ages ago. Also when the onload is called, the element doesn't exist at all yet, so it's also a bad idea to put it there.

Best would be to call the method from inside the ngAfterViewInit of your component, and use the @ViewChild annotation:

declare const PhotoEditorSDK: any;

@Component({
  template: `<div style="width: 100vw; height: 100vh;" #editor></div>`
})
export class EditorComponent implements AfterViewInit {

  @ViewChild('editor') editor: ElementRef<HTMLElement>; 

  ngAfterViewInit(): void {
    const image = new Image();
    image.addEventListener('load', () => {
      const editor = new PhotoEditorSDK.UI.DesktopUI({
        container: this.editor.nativeElement,
        license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
        editor: {
          image
        },
        assets: {
          baseUrl: '/assets'
        }
      });
    });

    image.src = './example.jpg'
  }
}