Binding Dynamic URL to FB like Button in angular2 - facebook

Question

I am trying to bind Dynamic URL to facebook page like button like this
<div id="fb-root"></div>
<div class="fb-like" [attr.data-href]="brand_overview_detail?.brand?.facebook"
data-layout="button" data-action="like" data-size="small" data-show-faces="false">
</div>
But seems facebook gets default page link before data is coming actually as per documentation here
https://developers.facebook.com/docs/plugins/like-button#settings
as an alternate i hide this untill page is not loaded properly with *ngIf like this
<span *ngIf='brand_overview_detail?.brand?.facebook'>
<div id="fb-root"></div>
<div class="fb-like" [attr.data-href]="brand_overview_detail?.brand?.facebook"
data-layout="button" data-action="like" data-size="small" data-show-faces="false">
</div>
</span>
But in this button is not showing at all,
what to do ? any help or tip ?

Answer 1

Ok, I got it to work, in a little hackie way:
I am adding the data-href with javascript not with [attr.data-href] and then I include the Facebook script:
in the template:
<div id="fb-like-btn" class="fb-like" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>
In the component (I am using a setInterval to wait for the element to be on the DOM, but that is because of my implementation):
private _fbLikeIframeSrc(){
let likeBtn = document.getElementById('fb-like-btn');
if(likeBtn) {
clearInterval(this._iframeInterval);
let page = encodeURIComponent(this.promotion.callsToAction.page);
likeBtn.setAttribute('data-href', this.promotion.callsToAction.page);
this._initFbSdk();
} else {
this._iframeInterval = setInterval(()=> {
this._fbLikeIframeSrc()
}, 100
);
}
}
private _initFbSkd() {
let d = document;
let s = 'script';
let id = 'facebook-jssdk';
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=************";
fjs.parentNode.insertBefore(js, fjs);
}
and behold, the like button appears!