[](https://murhafsousli.github.io/ngx-sharebuttons/)
[](https://www.npmjs.com/package/ngx-sharebuttons)
[](https://travis-ci.org/MurhafSousli/ngx-sharebuttons)
[](/LICENSE)
[stackblitz](https://stackblitz.com/edit/ngx-sharebuttons)
## Share button directive
Convert any element to a share button using `[shareButton]` directive.
Install with npm
```bash
$ npm install --save @ngx-share/core
```
Import `ShareModule` in your module
```ts
import { ShareModule } from '@ngx-share/core';
@NgModule({
imports: [
HttpClientModule, // (Required) for share counts
HttpClientJsonpModule, // (Optional) For linkedIn & Tumblr counts
ShareModule.forRoot()
]
})
```
In your template
```html
```
To use the default icons or colors, use **ShareButtons** service so you can access buttons properties
```ts
import { ShareButtons } from '@ngx-share/core';
@Component({
// ...
})
export class MyComponent {
constructor(public share: ShareButtons) {
}
}
```
Now you can set them
```html
```
Check [ShareButton Directive Demo](https://murhafsousli.github.io/ngx-sharebuttons/#/share-button-directive)
| 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](https://github.com/MurhafSousli/ngx-sharebuttons/issues). I am excited to see what the community thinks of this project, and I would love your input!
## Support
[](https://www.patreon.com/bePatron?u=5594898)
## Author
**Murhaf Sousli**
- [github/murhafsousli](https://github.com/MurhafSousli)
- [twitter/murhafsousli](https://twitter.com/MurhafSousli)
## License
- [MIT](/LICENSE)
## More plugins from the author
- [ng-gallery](https://github.com/MurhafSousli/ng-gallery)
- [ngx-progressbar](https://github.com/MurhafSousli/ngx-progressbar)
- [ngx-bar-rating](https://github.com/MurhafSousli/ngx-bar-rating)
- [ngx-disqus](https://github.com/MurhafSousli/ngx-disqus)
- [ngx-wordpress](https://github.com/MurhafSousli/ngx-wordpress)
- [ngx-highlightjs](https://github.com/MurhafSousli/ngx-highlightjs)
- [ngx-scrollbar](https://github.com/MurhafSousli/ngx-scrollbar)
- [ng-teximate](https://github.com/MurhafSousli/ng-teximate)
