@ngx-share-pat/button NPM

Share button component

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

Share button component is built on top of ShareModule so you need to install both @ngx-share-pat/core and @ngx-share-pat/button.

To use the default icons, install font-awesome package.

$ npm install --save @ngx-share-pat/core @ngx-share-pat/button font-awesome

Import ShareButtonModule in your module

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

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

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

@import '~font-awesome/css/font-awesome.min.css';
@import "~@ngx-share-pat/button/styles/share-buttons";
@import "~@ngx-share-pat/button/styles/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>

<!--Use custom text-->
<share-button button="pinterest" text="Pin" showText="true"></share-button>

Check ShareButton Component Demo

Name	Default value	Description
button	null	Button name, e.g. 'facebook', 'twitter' ...etc.
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 and Reddit.
description	null	Override description meta tag for LinkedIn, WhatsApp, Telegram and Pinterest
image	null	Override image meta tag for Pinterest only.
tags	null	Override tags for Tumblr and Twitter.
showIcon	true	Show button icon.
showText	false	Show button text.
showCount	false	Show share count.
(opened)	button name	Stream that emits when share window 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.

Issues

If you identify any errors in this component, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!