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

Example:

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

NOTE: If you don't set the [url] input of a share button, it will use the current page URL as the link to be shared.

You can access the share button properties such as icon and color directly from the template

Example:

<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.