Currently, I am attempting to embed a "Get Your Guide" Widget within an Angular2 application.
Although the script in index.html is being requested successfully, I am facing difficulties adding it to the HTML of the component.
<script async defer src="//widget.getyourguide.com/v2/core.js" onload="GYG.Widget(document.getElementById('gyg-widget'),{'q':'Paris'});"></script>
In my attempts so far:
<div id="gyg-widget"></div>
And in the typescript file:
import { Component, OnInit } from '@angular/core';
declare var GYG: any;
@Component({
selector: 'app-excursions',
templateUrl: './excursions.component.html',
styleUrls: ['./excursions.component.scss']
})
export class ExcursionsComponent implements OnInit {
constructor() {}
ngOnInit() {
new GYG.Widget(document.getElementById('gyg-widget'),{'q':'Paris'});
}
}
My current approach appears to be unsuccessful with the following error message:
Error: Error in ./ExcursionsComponent class ExcursionsComponent_Host - inline template:0:0 caused by: GYG is not defined ReferenceError: GYG is not defined at ExcursionsComponent.ngOnInit (excursions.component.ts:20)
At this point, I'm unsure about the correct solution. What steps should I take next?