Angular Share Buttons
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
Author
Murhaf Sousli