@zomoz/ngx-share

Angular Share Buttons

stackblitz

Share button directive

Convert any element to a share button using [shareButton] directive.

Install with npm

$ npm install --save @ngx-share/core

Import ShareModule in your module

import { ShareModule } from '@ngx-share/core';

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

In your template

<button shareButton="facebook">Share</button>
<button shareButton="twitter">Tweet</button>
<button shareButton="pinterest">Pin</button>

To use the default icons or colors, use ShareButtons service so you can access buttons properties

import { ShareButtons } from '@ngx-share/core';

@Component({
  // ...
})
export class MyComponent {
  constructor(public share: ShareButtons) {
  }
}

Now you can set them

<!--Set color and icon-->
<button shareButton="twitter" [style.backgroundColor]="share.prop.twitter.color">
  <i [class]="share.prop.twitter.icon"></i>
</button>

<!--Material example-->
<button md-icon-button shareButton="telegram" [style.color]="share.prop.telegram.color">
  <i [class]="share.prop.telegram.icon"></i>
</button>

Check ShareButton Directive Demo

Name	Default value	Description
[shareButton]	null	Button name, e.g. 'facebook', 'twitter' ...etc.
[sbUrl]	current URL	Sharing link.
[sbTitle]	null	Override title meta tag for LinkedIn and Reddit.
[sbDescription]	null	Override description meta tag for LinkedIn, WhatsApp, Telegram and Pinterest
[sbImage]	null	Override image meta tag for Pinterest only.
[sbTags]	null	Override tags for Tumblr and Twitter.
(sbOpened)	button name	Stream that emits when share window has opened.
(sbClosed)	button name	Stream that emits when share dialog has closed.
(sbCount)	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!

Support

Author

Murhaf Sousli

• github/murhafsousli
• twitter/murhafsousli

License

• MIT

More plugins from the author

• ng-gallery
• ngx-progressbar
• ngx-bar-rating
• ngx-disqus
• ngx-wordpress
• ngx-highlightjs
• ngx-scrollbar
• ng-teximate