In this article, we implement a sharing URL using Angular. For sharing button, we used “ngx-sharebuttons” we need to install module below command.
npm i @angular/cdk
npm i ngx-sharebuttons
//font install
npm i @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
After installing module lets add a module in our app.module.ts file.
....
import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';
....
@NgModule({
imports: [ ...,
ShareButtonsModule.withConfig({
debug: true
}),
ShareIconsModule
],
....
})
Import share buttons theme in the global style “app/src/style.scss”
@import '~ngx-sharebuttons/themes/material/material-dark-theme';
@import '~ngx-sharebuttons/themes/modern/modern-light-theme';
@import '~ngx-sharebuttons/themes/circles/circles-dark-theme';
After adding a module in the app.module file we can use it in our component.
<share-buttons [theme]="'material-dark'"
[include]="['facebook','twitter','linkedin','pinterest','reddit','mix','vk','telegram','messenger','whatsapp','xing','line','sms','email','copy']"
[show]="9"
[size]="1"
[url]="'https://www.eduforbetterment.com/generate-qr-code-in-angular/'"
[image] ="'https://www.eduforbetterment.com/wp-content/uploads/2020/08/qrcode.jpg'"
[autoSetMeta]="false"
></share-buttons>
Below is the full code for the component,css
Let’s share-buttons options display in below table which we can use that options.
Option Name | Description |
---|---|
theme (input) | you can set button theme, default value is null |
include(input) | You can pass the multiple options pass in the array. like [‘facebook’,’twitter’, ‘linkedin’, ‘pinterest’, ‘reddit’, ‘mix’, ‘vk’, ‘telegram’, ‘messenger’, ‘whatsapp’, ‘xing’, ‘line’, ‘sms’, ’email’, ‘copy’] |
exclude(input) | You can pass the multiple options pass in the array that you can not display their. like [‘facebook’,’twitter’] |
show(input) | You can pass the number of button to display then after more option to show more button |
url(input) | You can pass URL |
title(input) | You can pass Title to share |
image(input) | You can pass image to share |
autoSetMeta(input) | Initializes meta tag inputs from SEO meta tags, default value is true |
showText(input) | Show buttons text, default value is false |
Below is the full embeded code for the share button you can easily used in your application.
Example
Spread the love
1 2