0

I have built an application that loads articles into a page component using an api from our server. The article loads correctly. Where I am having a problem is I have an embedded script in the api that doesn't get loaded. How do I detect this embedded script or add it before page load so that it shows?

This is the script that I need to get added to the page. 

<script src="//mywebsite.com/charts/embed/322/"></script>

I set my base url as 

chartUrl = https://mysebsite.com/

chartId: number

let url = ${this.chartUrl}charts/embed/${chartId}

I need to get the number from the end of the script after embed/ so for this example 322. Since it will change for every chart I cant hard code it.

This does add it to the script to the head. 

loadUrl: Promise<any>;

public loadScript() {
    console.log('preparing to load...')
    let node = document.createElement('script');
    node.src = this.url;
    node.type = 'text/javascript';
    node.async = true;
    node.charset = 'utf-8';
    document.getElementsByTagName('head')[0].appendChild(node);
}

ngOnInit() {
    this.loadUrl = new Promise((resolve) => {
      console.log('resolving promise...');
      this.loadScript();
  });
}

Do I need to do 

<div [innerHTML]="someValue| safeHtml"></div>

To get it to display properly?

Any help is appreciative.

Karol Trybulec
  • 1,056
  • 1
  • 11
  • 17
jfulton
  • 77
  • 1
  • 10
  • You want to use `bypassSecurityTrustScript` from https://angular.io/api/platform-browser/DomSanitizer – The Head Rush May 07 '20 at 23:09
  • What's your problem? You don't need any html to load a script – David May 08 '20 at 06:27
  • Would that help? https://stackoverflow.com/questions/34489916/how-to-load-external-scripts-dynamically-in-angular –  May 27 '20 at 16:08

0 Answers0