CODEWITHSUNDEEP
angularembedexternal
kingofbbq
kingofbbq

Reputation: 336

Angular 2+ | Embedding booking.com map widget

I want to embed the booking.com map widget in my Angular project, but this does not work. I assume because Angular converts this code into something else after building. The embed code looks like this:

<ins class="bookingaff" data-aid="0000" data-target_aid="0000" data-prod="map" data-width="100%" data-height="590" data-lang="ualng" data-dest_id="0" data-dest_type="landmark" data-latitude="35.6894875" data-longitude="139.6917064" data-mwhsb="0" data-checkin="2019-05-20" data-checkout="2019-05-21">
    <!-- Anything inside will go away once widget is loaded. -->
    <a href="//www.booking.com?aid=0000">Booking.com</a>
</ins>
<script type="text/javascript">
   (function(d, sc, u) {
      var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
      s.type = 'text/javascript';
      s.async = true;
      s.src = u + '?v=' + (+new Date());
      p.parentNode.insertBefore(s,p);
    })(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js');
</script>

As you can see this is how it should look like:

https://jsfiddle.net/ypu64m2d/

But in Angular it does not work:

https://stackblitz.com/edit/angular-yxbg1d?file=src/app/app.component.html

I also tried to move the script file in the index.html <head>, same result.

Does anyone know how to approach this?

Upvotes: 0

Views: 533

Answers (1)

Laetitia Dallinge
Laetitia Dallinge

Reputation: 61

Try to include it directly in a component. I tried with the app component and it worked. You could create a separate component to execute this piece of code.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';

  ngOnInit(){
     (function(d, sc, u) {
      var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
      s.type = 'text/javascript';
      s.async = true;
      s.src = u + '?v=' + (+new Date());
      p.parentNode.insertBefore(s,p);
      })(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js');
  }
}

Upvotes: 3

Related Questions