0

I have a script in my index.html that needs to be called on the component load.

If I refresh the page completely, the script is called and my map API component shows.

If I go from component to component or page to page through my SPA, the script does not load the map at all, and needs a full page refresh in order to do so.

Here is the script:

<script>function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="https://cdn.stor....</script

(I left some out but that is the beginning of the script and it is placed right before closing body tag).

How could I call that function from my angular 6 component on init? or after init?

user10181542
  • 1,210
  • 3
  • 16
  • 37
  • Does this particular map have an angular module? Most do and is much easier to use than a script tag. The issue with using scripts in angular is that technically when you navigate you are not refreshing the page thus the script is not called again, so when you first load the application the script will load, but if you leave the page and come back the script will not reload per se, which will not recreate the elements on the page, since to the browser it thinks you havent gone anywhere – Smokey Dawson Mar 01 '19 at 02:16
  • Now you could potentially solve this by removing and adding the script tag back into the header anytime your route to that particular page, but that breeds its own issues, what map are you using?? – Smokey Dawson Mar 01 '19 at 02:17
  • Using storepoint, yes you are following and exactly correct. They do not have an angualar component. – user10181542 Mar 01 '19 at 02:21
  • You could get around this by just adding the script tag to an iframe located in the page you want the map to be – Smokey Dawson Mar 01 '19 at 02:31
  • Possible duplicate of [How to call JavaScript functions from Typescript in Angular 5?](https://stackoverflow.com/questions/49526681/how-to-call-javascript-functions-from-typescript-in-angular-5) – emkay Mar 01 '19 at 06:32

1 Answers1

0

yes, you can call a JS method inside your typescript. Step I) Before your TS class, declare a variable as mentioned below.

declare var loadSFdata: Function;

Step II) now in your TS methods, simply call this JS method as you call a Function. eg.:

loadSFdata();

#NOTE: You cannot use observable or async await over to the same.

sachin arora
  • 9
  • 1
  • 2