Share Button Component

Overview

<share-button> is a component that adds a single share button..

Installation

Install the following packages:

npm i ngx-sharebuttons @angular/cdk
npm i @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Import the theme

Import one of the share buttons themes in the global styles:

@import 'ngx-sharebuttons/button/themes/default';

The default theme is optional, you can replace it with other theme or create your own theme from scratch, see the Styling Guide

To import all FontAwesome share icons, see the Icons Guide

Usage

<share-button button="facebook"/>

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

@Component({
  standalone: true,
  selector: 'basic-example',
  imports: [ShareButton],
  template: `
    <share-button button="facebook" text="Share" showText>
  `
})
export class ShareButtonExample {
}

Example with custom icon

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

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

Check the Single Share Button Demo.

Available Inputs / Outputs

Name	Default value	Description
[button]	null	Button name, e.g. 'facebook', 'twitter' ...etc.
[theme]	null	Set button theme.
[text]	null	Custom button text.
[icon]	null	Custom button icon.
[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.
[redirectUrl]	true	Override redirectUrl for Messenger (desktop), default: null
[showIcon]	true	Show button icon.
[showText]	false	Show button text.
(opened)	button name	Stream that emits when share dialog has opened.