@ngx-share-pat/core

Share buttons components for Angular and Ionic -- Any text for Twitter and Mail

Usage no npm install needed!

<script type="module">
  import ngxSharePatCore from 'https://cdn.skypack.dev/@ngx-share-pat/core';
</script>

README

Angular Share Buttons

Capture

npm npm Build Status npm

stackblitz

Share button directive

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

Install with npm

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

Import ShareModule in your module

import { ShareModule } from '@ngx-share-pat/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-pat/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

npm

Author

Murhaf Sousli

License

More plugins from the author