Angular2 dynamic Facebook share button using string interpolation - error

Question

I'm trying to use facebook's javascript sdk to make a dynamic share button on my angular app. Each page has a unique querystring which I am appending to the URL in my component but when I try to use string interpolation to place it in the data-href I get this error:

  <div style="position: absolute; right:5px;" class="fb-share-button" data-href="{{eventUrl}}" data-layout="button" data-size="large" data-mobile-iframe="true">
      <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fmyurl.com%2F&amp;src=sdkpreparse">
        Share
      </a>
    </div>

Unhandled Promise rejection: Template parse errors: Can't bind to 'href' since it isn't a known property of 'div'. ("

<div style="position: absolute; right:5px;" class="fb-share-button" [ERROR ->]data-href="{{eventUrl}}"

data-layout="button" data-size="large" data-mobile-iframe="true"> ; Task: Promise.then ; Value: SyntaxError Error: Template parse errors: Can't bind to 'href' since it isn't a known property of 'div'. ("

<div style="position: absolute; right:5px;" class="fb-share-button" [ERROR ->]data-href="{{eventUrl}}"

data-layout="button" data-size="large" data-mobile-iframe="true">

Answer 1

Change data-href="{{eventUrl}}" to [attr.data-href]="eventUrl" and that should solve your problem.

Afterwards, you may end-up with the problem explained here, so take a look.