How to embed a script tag into Angular component

Question

I've got an Angular/Typescript website. I need to embed a third party script. The script generates a table.

How can I display that table inside home.component.html. Not at the start or at the beginning, within. Like so.

I've been able to get the script embedded but it doesn't look like the script is rendering so it just displays it in the source but doesn't render the table.

Update

The table can now rendered but only outside of app-root. It should be inside of home.component.html. Source Image

home.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { DOCUMENT } from '@angular/common'

declare var myExtObject: any;

@Component({
  selector: 'app-careers',
  templateUrl: './careers.component.html',
  styleUrls: ['./careers.component.scss']
})

export class CareersComponent implements OnInit {
  private iife: any

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.iife = myExtObject()
  }

}

home.component.html

<div id="BambooHR">
    <script src="https://xxxxxxx.xxx.com" type="text/javascript"></script>
    <div></div>
</div>

The code behind the script is found below. I have that in an external.js file.

var myExtObject = function() {

	//add css file to dom so IE8 recognizes it
	document.write('<link href="https://xxx.css" rel="stylesheet" />');

	var divId="BambooHR-ATS";
	var el=document.getElementById(divId);
	if(!el) {
		document.write("<div id=\""+divId+"\"></div>");
	}

	var xmlhttp;
	var ieFlag = 0;
	if (('XDomainRequest' in window && window.XDomainRequest !== null) && document.documentMode < 10) {
		xmlhttp=new XDomainRequest();
		ieFlag = 1;
	} else if (window.XMLHttpRequest) {
		xmlhttp=new XMLHttpRequest();
	} else {
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	var embedUrl = "https://xxx.php";

	var departmentId = "0";

	if (departmentId) {
		embedUrl += '?departmentId=' + encodeURIComponent(departmentId);
	}

	document.addEventListener('readystatechange', function(event) {
		if (event.target.readyState === "complete") {
			if (ieFlag == 1) { //needed for IE9 CORS
				xmlhttp.onload = loadd;
				xmlhttp.open("GET",embedUrl);
				xmlhttp.send();

			} else {
				xmlhttp.onreadystatechange=function() {
					if(xmlhttp.readyState==4 && xmlhttp.status==200) {

						var content = xmlhttp.responseText;
						var footerId="BambooHR-Footer";
						var fel=document.getElementById(footerId);

						el=document.getElementById(divId);

						if(el && !fel) {
							content += "<div id="xxx"/></a></div>";
						}

						if(el) el.innerHTML=content;
					}
				}

				xmlhttp.open("GET",embedUrl,true);
				xmlhttp.send();
			}
		}
	});

	function loadd() { //needed for IE9 CORS
		var content = xmlhttp.responseText;
		var footerId="BambooHR-Footer";
		var fel=document.getElementById(footerId);

		el=document.getElementById(divId);

		if(el && !fel) {
			content += "<div id=\"BambooHR-Footer\">Powered by <a href=\"http://www.bamboohr.com\" target=\"_blank\" rel=\"external\"><img src=\"https://resources.bamboohr.com/images/footer-logo.png\" alt=\"BambooHR - HR software\"/></a></div>";
		}
		el.innerHTML=content;
	}
};

Answer 1

Don't insert the script tag manually. Import the library in your angular.json, in scripts section:

"scripts": [
  "./node_modules/yourtablelibrary/build/yourtablelibrary.min.js"
]

Reference: https://medium.com/@clintpitzak/how-to-use-external-javascript-libraries-in-angular-8-247baacbdccf