@ngx-share-pat/core v0.0.4

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

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