Share Button Directive

Convert any element to a share button using [shareButton] directive.

Installation

NPM

npm i -S @ngx-share/core

YARN

yarn add @ngx-share/core

Usage

Import ShareModule in your module

import { ShareModule } from '@ngx-share/core';

@NgModule({
  imports: [
    HttpClientModule,      // (Required) for share counts
    HttpClientJsonpModule, // (Optional) Add if you want Tumblr share counts
    ShareModule.forRoot()
  ]
})

The most basic usage to create a share button is shareButton={{buttonName}} on a button

<button shareButton="facebook">Share</button>
<button shareButton="twitter">Tweet</button>
<button shareButton="pinterest">Pin</button>

To use the default icons and colors, Inject ShareButtons service in your component then access the properties from the template

Component:

import { ShareButtons } from '@ngx-share/core';

@Component({
  // ...
})
export class MyComponent {
  constructor(public share: ShareButtons) {
  }
}

Template:

<!--Set color and icon-->
<button shareButton="twitter" [style.backgroundColor]="share.prop.twitter.color">
  <fa-icon [icon]="share.prop.twitter.icon" size="lg"></fa-icon>
</button>

<!--Material example-->
<button md-icon-button shareButton="telegram" [style.color]="share.prop.telegram.color">
  <fa-icon [icon]="share.prop.telegram.icon" size="lg"></fa-icon>
</button>

Check ShareButton Directive Demo.

Available Inputs / Outputs

Name	Default value	Description
[shareButton]	null	Button name, e.g. 'facebook', 'twitter' ...etc.
[url]	current URL	Sharing link.
[title]	null	Override title meta tag for LinkedIn, Reddit and Email.
[description]	null	Override description meta tag for LinkedIn, WhatsApp, Messenger, Telegram, Pinterest and Email
[image]	null	Override image meta tag for Pinterest only.
[tags]	null	Override tags for Tumblr and Twitter.
[autoSetMeta]	true	Auto set meta tags inputs from the SEO meta tags.
[getCount]	false	Gets and emits share counts.
(opened)	button name	Stream that emits when share window has opened.
(closed)	button name	Stream that emits when share dialog has closed.
(count)	share count	Stream that emits share count of the share URL.