Share Button Directive

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

Installation

NPM

npm i ngx-sharebuttons @angular/cdk

Usage

Import ShareModule in your module

import { ShareModule } from 'ngx-sharebuttons';

@NgModule({
  imports: [
    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

Template:

<button mat-fab shareButton="facebook" #fbBtn="shareButton"
        [style.backgroundColor]="fbBtn?.color">
  <fa-icon *ngIf="fbBtn.icon" [icon]="fbBtn.icon"></fa-icon>
</button>

<button mat-fab shareButton="twitter" #twtBtn="shareButton" 
        [style.backgroundColor]="twtBtn?.color">
  <fa-icon *ngIf="twtBtn.icon" [icon]="twtBtn.icon"></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.
(opened)	button name	Stream that emits when share window has opened.
(closed)	button name	Stream that emits when share dialog has closed.