Share Buttons Component

Use <share-buttons> to add a collection of share buttons.

Installation

NPM

npm i -S @ngx-share/core @ngx-share/button @ngx-share/buttons
npm i -S @fortawesome/fontawesome-svg @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons free-brands-svg-icons

YARN

yarn add @ngx-share/core @ngx-share/button @ngx-share/buttons
yarn add @fortawesome/fontawesome-svg @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons free-brands-svg-icons

Usage

Import ShareButtonsModule in your module

import { ShareButtonsModule } from '@ngx-share/buttons';

@NgModule({
  imports: [
    HttpClientModule,      // (Required) for share counts
    HttpClientJsonpModule, // (Optional) for Tumblr counts
    ShareButtonsModule.forRoot()
  ]
})

Import icons, core styles and theme from the global style src/styles.scss

@import '~@ngx-share/button/styles/share-buttons';
@import '~@ngx-share/button/styles/themes/default/default-theme';

Check all themes

Now you can use the component in your template

<share-buttons></share-buttons>

Check ShareButtons Component 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.
[size]	0	Button size, e.g. -4, 2.5, 1...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	Initializes meta tags inputs from the SEO meta tags.
[showIcon]	true	Show button icon.
[showText]	false	Show button text.
[showCount]	false	Show share count.
(opened)	button name	Stream that emits when share dialog has opened.
(closed)	button name	Stream that emits when share dialog has closed.
(count)	share count	Stream that emits the share count of the URL.