-
Notifications
You must be signed in to change notification settings - Fork 127
Share Button Component
Murhaf Sousli edited this page Dec 24, 2022
·
21 revisions
Use <share-button>
component to add share buttons individually.
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
Import ShareButtonModule
in your module
import { ShareButtonModule } from 'ngx-sharebuttons/button';
@NgModule({
imports: [
ShareButtonModule
]
})
Import the theme in the global style src/styles.scss
@import '~ngx-sharebuttons/themes/default';\
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>
Check ShareButton Component Demo.
Name | Default value | Description |
---|---|---|
[button] | null | Button name, e.g. 'facebook', 'twitter' ...etc. |
[theme] | null | Set button theme. |
[text] | null | Custom button text. |
[icon] | null | Custom button icon. |
[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. |