Share Button Component

Use <share-button> component to add share buttons individually.

Installation

NPM

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

YARN

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

Usage

Import ShareButtonModule in your module

import { ShareButtonModule } from '@ngx-share/button';

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

Import the theme in the global style src/styles.scss

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

Check all themes here

Now you can use the component in your template

<share-button button="facebook"></share-button>
<share-button button="twitter"></share-button>

Check ShareButton Component 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.
[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 share count of the share URL.