Nebulous Program Mechanic

    @ngx-share-pat/button
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.5 • Public • Published

    Angular Share Buttons

    Capture

    npm npm Build Status npm

    stackblitz

    Share button component

    Use <share-button> component to add buttons individually.

    Share button component is built on top of ShareModule so you need to install both @ngx-share-pat/core and @ngx-share-pat/button.

    To use the default icons, install font-awesome package.

    $ npm install --save @ngx-share-pat/core @ngx-share-pat/button font-awesome

    Import ShareButtonModule in your module

    import { ShareButtonModule } from '@ngx-share-pat/button';
    
    @NgModule({
      imports: [
        HttpClientModule,      // (Required) for share counts
        HttpClientJsonpModule, // (Optional) For linkedIn & Tumblr counts
        ShareButtonModule.forRoot()
      ]
    })

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

    @import '~font-awesome/css/font-awesome.min.css';
    @import "~@ngx-share-pat/button/styles/share-buttons";
    @import "~@ngx-share-pat/button/styles/themes/default/default-theme";

    Check all themes here

    Now you can use the component in your template

    <share-button button="facebook"></share-button>
    <share-button button="twitter"></share-button>
    
    <!--Use custom text-->
    <share-button button="pinterest" text="Pin" showText="true"></share-button>

    Check ShareButton Component Demo

    Name Default value Description
    [button] null Button name, e.g. 'facebook', 'twitter' ...etc.
    [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 and Reddit.
    [description] null Override description meta tag for LinkedIn, WhatsApp, Telegram and Pinterest
    [image] null Override image meta tag for Pinterest only.
    [tags] null Override tags for Tumblr and Twitter.
    [showIcon] true Show button icon.
    [showText] false Show button text.
    [showCount] false Show share count.
    (opened) button name Stream that emits when share window has opened.
    (closed) button name Stream that emits when share dialog has closed.
    (count) 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

    npm

    Author

    Murhaf Sousli

    License

    More plugins from the author

    Install

    npm i @ngx-share-pat/button

    DownloadsWeekly Downloads

    1

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    61.6 kB

    Total Files

    15

    Last publish

    Collaborators

    • pathiery