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;
	}
};

How does that script work? Do you have to call a method from it? Does it expect data to already be there? — David
– David, Commented May 30, 2020 at 5:48

Sandman · Accepted Answer · 2020-05-29 22:26:37Z

2

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

answered May 29, 2020 at 22:26

Sandman

1,57910 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Olawale david · Accepted Answer · 2020-05-29 22:50:50Z

2

All scripts are executed when the page is loaded, <script> tag added to dom after page is loaded does not get executed

As a result of that, embedding a script tag will not load the content of the file seams angular does not reload the page.

A solution is to make the component implement AfterInit interface and import the script dynamically in the ngAfterInit method like this

ngAfterInit() {
   import('./myfile.js')
  }

Assuming that the script to be loaded is myfile.js and is is the same directiory

answered May 29, 2020 at 22:50

Olawale david

1,6321 gold badge12 silver badges14 bronze badges

3 Comments

Jack.c Over a year ago

Right and how would I target a div to display the content?

Olawale david Over a year ago

Be more specific, what are you trying to achieve

Jack.c Over a year ago

I'm looking to have the IIFE inside external.js shown above, instantiated on AfterInit and have the table generated displayed in my Angular component in a given div. I am able to have the table generated and displayed but only outside of <app-root> even though it's been instantiated inside home.component.ts ngAfterInit(). Thanks for your help.

Collectives™ on Stack Overflow

How to embed a script tag into Angular component

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related