-
Notifications
You must be signed in to change notification settings - Fork 127
Share Buttons Component
Murhaf Sousli edited this page Dec 11, 2018
·
30 revisions
Use <share-buttons>
to add a collection of share buttons.
NPM
npm i -S @ngx-share/core @ngx-share/button @ngx-share/buttons @angular/cdk
npm i -S @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
YARN
yarn add @ngx-share/core @ngx-share/button @ngx-share/buttons @angular/cdk
yarn add @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
Import ShareButtonsModule
in your module
import { ShareButtonsModule } from '@ngx-share/buttons';
@NgModule({
imports: [
HttpClientModule, // (Required) for share counts
HttpClientJsonpModule, // (Optional) for Tumblr counts
ShareButtonsModule
]
})
Import the theme in the global style src/styles.scss
@import '~@ngx-share/button/themes/default/default-theme';
Check all themes
Now you can use the component in your template
<share-buttons></share-buttons>
Check ShareButtons Component Demo
Name | Default value | Description |
---|---|---|
[include] | [ ] | Include certain buttons. Button's order will be as you type it. |
[exclude] | [ ] | Exclude certain buttons. |
[show] | null | Number of buttons to show, if defined 'more' button will appear. |
[theme] | null | Set button theme. |
[size] | 0 | Button size, e.g. -4, 2.5, 1...etc. |
[url] | current URL | Sharing link. |
[title] | null | Override title meta tag for LinkedIn, Reddit and Email. |
[description] | null | Override description meta tag for LinkedIn, WhatsApp, Messenger, Telegram, Pinterest and Email |
[image] | null | Override image meta tag for Pinterest only. |
[tags] | null | Override tags for Tumblr and Twitter. |
[autoSetMeta] | true | Initializes meta tags inputs from the SEO meta tags. |
[showIcon] | true | Show button icon. |
[showText] | false | Show button text. |
[showCount] | false | Show share count. |
(opened) | button name | Stream that emits when share dialog has opened. |
(closed) | button name | Stream that emits when share dialog has closed. |
(count) | share count | Stream that emits the share count of the URL. |