Skip to content

Share Buttons Component

Murhaf Sousli edited this page Jun 16, 2018 · 30 revisions

Share buttons component

Use <share-buttons> to add a collection of share buttons.

Installation

NPM

$ npm i -S @ngx-share/{core,button,buttons}
$ npm i -S @fortawesome/{fontawesome-svg-core,angular-fontawesome,free-solid-svg-icons,free-brands-svg-icons}

YARN

$ yarn add @ngx-share/{core,button,buttons}
$ yarn add @fortawesome/{fontawesome-svg-core,angular-fontawesome,free-solid-svg-icons,free-brands-svg-icons}

Usage

Import ShareButtonsModule in your module

import { ShareButtonsModule } from '@ngx-share/buttons';

@NgModule({
  imports: [
    HttpClientModule,      // (Required) for share counts
    HttpClientJsonpModule, // (Optional) for Tumblr counts
    ShareButtonsModule.forRoot()
  ]
})

Import icons, core styles and theme from the global style src/styles.scss

@import '~@ngx-share/button/styles/share-buttons';
@import '~@ngx-share/button/styles/themes/default/default-theme';

Check all themes

Now you can use the component in your template

<share-buttons></share-buttons>

Check ShareButtons Component Demo

Available Inputs / Outputs

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.