Share Buttons Component

Overview

<share-buttons> is a component that displays a collection of share buttons.

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-buttons/>

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

@Component({
  standalone: true,
  selector: 'basic-example',
  imports: [ShareButtons],
  template: `
    <share-buttons>
  `
})
export class ShareButtonsExample {
}

Check the Share Buttons Demo.

Available Inputs / Outputs

Name	Default value	Description
[include]	[ ]	Include certain buttons. Button's order will be as you type it.
[exclude]	[ ]	Exclude certain buttons.
[show]	null	Number of buttons to show, if defined 'more' button will appear.
[theme]	null	Set button theme.
[text]	null	Popup's button custom icon, default: 'Share'.
[icon]	null	Popup's button custom text, default: ['fas', 'share']
[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.