So I am using angular materials with angular4 and I have put html for a booking.com form inside an MdDialogue component. I want this dialogue to popup with the form inside of it when somebody pushes a button. It works as expected 1 time after the app has loaded, but not again. I would like it to work every time. There is no error message so it is unclear to me why this is happening. The logic inside booking() initializes the form.
The html for the booking.com form looks like this.
<ins class="bookingaff" data-aid="1179852" data-target_aid="1179846" data-prod="nsb" data-width="100%" data-height="auto">
<!-- Anything inside will go away once widget is loaded. -->
<a href="//www.booking.com?aid=1179846">Booking.com</a>
</ins>
Here is what the booking.com component looks like...
...
openBookings(){
let dialogRef = this.dialog.open(Booking_com);
dialogRef.afterClosed().subscribe(result => {
});
}
debug(data){
console.log(data);
}
}
@Component({
selector: 'Booking_com',
templateUrl: 'Booking_com.html',
styleUrls: ['Booking_com.sass']
})
export class Booking_com implements AfterViewInit{
ngAfterViewInit(): void {
this.booking();
}
constructor(public dialogRef: MdDialogRef<Booking_com>) {}
booking(){
(function(d, sc, u) {
var s:any = d.createElement(sc);
var p:any = 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');
}
}
The images show that it works the first time but not he second time.... Any idea as to why this is happening and how to solve this issue would be great.
