Angular 2 - Share page URL, Title, and Description on Facebook

Question

My end goal is simple:

1. The user clicks some button on the UI.
2. The Typescript function called by click opens a new share tab on facebook for the user.
3. Both the 'Title' and the 'Description' for the shared page is provided by my site.

We have a post on including metatags on the page being linked, which fb the knows to include as the title/description (How do I customize Facebook's sharer.php). The problem is that I am using Angular 2, so I have to somehow to dynamically add metatags for the page before facebook sees it.

I am having a hard time imagining how that works, since I am assuming the FB server will hit my NG2 app and search for the metatags (so editing metatags in the browser opening the share link is meaningless, since the FB API will get a different instance of the html).

tl;dr: How do I open a fb url share dialog from an NG2 app and provide a title/description?

Note: The 'Share on fb' page can simply be opened like this: window.open('http://www.facebook.com/sharer/sharer.php?u=www.google.com'); This works, but without params.

---

Optional addendum (sample code to add meta-tags dynamically, which works, but doesn't help):

var titleMeta = document.createElement('meta');
var descMeta = document.createElement('meta');

titleMeta.setAttribute('property', 'og:title');
titleMeta.setAttribute('content', 'The Rock');

descMeta.setAttribute('property', 'og:description');
descMeta.setAttribute('content', 'Foo Description');

document.getElementsByTagName('head')[0].appendChild(titleMeta);
document.getElementsByTagName('head')[0].appendChild(descMeta);

Addendum 2: The sharer used to allow you to put in the title and the description in the url, but that is no longer the case as per https://developers.facebook.com/x/bugs/357750474364812/. Looks like it HAS to be pulled from the meta tags.

Answer 1

You Should look @ Share Buttons might help

npm install --save ngx-sharebuttons

AppModule

import {ShareButtonsModule} from 'ngx-sharebuttons';
@NgModule({
  imports: [
   //...
   HttpModule, 
   ShareButtonsModule.forRoot(),
  // ...
  ]
})

Template

<share-buttons></share-buttons>