Share Button Directive

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

Installation

NPM

npm i -S @ngx-share/core @angular/cdk

YARN

yarn add @ngx-share/core @angular/cdk

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
  ]
})

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 get the default icons and colors, you can inject ShareService in your component and access the properties from the template

Component:

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

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

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.