Skip to content

Share Buttons Component

Murhaf Sousli edited this page Jun 1, 2020 · 30 revisions

Capture

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

Installation

NPM

npm i ngx-sharebuttons @angular/cdk
npm i @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Usage

Import ShareButtonsModule in your module

import { ShareButtonsModule } from 'ngx-sharebuttons';

@NgModule({
  imports: [
    ShareButtonsModule
  ]
})

Import the theme in the global style src/styles.scss

@import '~ngx-sharebuttons/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.
(opened) button name Stream that emits when share dialog has opened.
(closed) button name Stream that emits when share dialog has closed.