I have some problems to include 3rd party widgets with a javascript part into my Angular app. I read and tried solutions like
Dynamically load external javascript file from Angular component
and these work, but only one time. If I have a route change and I go back or they are displayed on another page of the webseite they stop working.
I like to include these 3rd party widgets as Angular components on various places into the sidebar of my Angular app. A 3rd party widget e.g. looks like that (this is the code from the 3rd party):
<div id="form-192796-wrapper">
<form id="ktv2-form-192796" accept-charset="UTF-8" method="post" action="https://www.klick-tipp.com/api/subscriber/signin.html" >
<input type="hidden" id="FormField_ApiKey" name="apikey" value="xxx" />
<input type="hidden" id="FormField_Digit" name="fields[fieldDigit]" value="" />
<div class="ktv2-form-element"><label for="FormField_EmailAddress">Ihre E-Mail-Adresse: </label><br />
<input type="text" id="FormField_EmailAddress" name="email" value="" size="40"/></div><br />
<div><input type="submit" id="FormSubmit" name="FormSubmit" value=">Your Text"/></div>
</form>
</div>
<script type='text/javascript' src='https://klicktipp.s3.amazonaws.com/listbuildings/system/forms/scripts/protect.js'></script>
And I included it into my components HTML like this:
<form #form id="ktv2-form-192796" accept-charset="UTF-8" method="post" action="https://www.klick-tipp.com/api/subscriber/signin.html" >
<input type="hidden" id="FormField_ApiKey" name="apikey" value="xxx" />
<input type="hidden" id="FormField_Digit" name="fields[fieldDigit]" value="" />
<div class="ktv2-form-element">
<label for="FormField_EmailAddress">Ihre E-Mail-Adresse: </label><br />
<input type="text" id="FormField_EmailAddress" name="email" value="" size="40"/>
</div>
<br />
<div>
<button type="submit" (click)="form.submit()">Search</button>
</div>
</form>
I tried several approaches with the javascript, I put it into
- index.html
- "scripts" section of angular.json and
- I dynamically loaded it as described in the link above
With all solutions the javascript is added to head-section of the HTML, but they work exactly one time. It seems that somehow the relation between the javascript in the head section and the widget (or the HTML that uses this javascript) is broken after a page change.
Do you have any suggestions?
