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