Share Button Directive

Overview

[shareButton] is a directive that transforms an element into a share button.

Installation

Install the following packages:

npm i ngx-sharebuttons @angular/cdk

Usage

The most basic share button needs only the name of the social network. e.g: shareButton="x"

import { Component } from '@angular/core';
import { ShareButtonDirective } from 'ngx-sharebuttons';

@Component({
  standalone: true,
  selector: 'basic-example',
  imports: [ShareButtonDirective],
  template: `
    <button shareButton="facebook">
      Share on facebook
    </button>
  `
})
export class ShareDirectiveExample {
}

Example with icon:

import { Component } from '@angular/core';
import { ShareButtonDirective } from 'ngx-sharebuttons';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { faXTwitter } from '@fortawesome/free-brands-svg-icons';

@Component({
  standalone: true,
  selector: 'basic-example',
  imports: [ShareButtonDirective, FaIconComponent],
  template: `
    <button shareButton="x">
      <fa-icon [icon]="xIcon" size="lg"></fa-icon>
    </button>
  `
})
export class ShareDirectiveExample {
  xIcon = faXTwitter
}

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

<button mat-fab
        shareButton="facebook"
        #facebookBtn="shareButton"
        [style.background-color]="facebookBtn.color">
  <fa-icon [icon]="facebookBtn.icon" size="lg"/>
</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 Reddit and Email.
[description]	null	Override description meta tag for WhatsApp, Messenger, Telegram, Pinterest and Email
[image]	null	Override image meta tag for Pinterest only.
[tags]	null	Override tags for Tumblr and Twitter.
[redirectUrl]	true	Override redirectUrl for Messenger (desktop), default: null.
(opened)	button name	Stream that emits when share dialog has opened.