Angular 10+ Social Sharing Button - Education For Betterment

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


import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'ngx sharebuttons';
}


<h1>Share Button With Square Shape</h1>

<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>
<br><br>
<h1>Share Button With Round Shape</h1>

<share-buttons [theme]="'circles-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>
<br><br>
<h1>Share Button With Round Shape With Text</h1>
<share-buttons [theme]="'circles-dark'"
 [include]="['facebook','twitter','linkedin','pinterest','reddit','mix','vk','telegram','messenger','whatsapp','xing','line','sms','email','copy']"
 [show]="9"
 [size]="1"
 [showText]="true"
 [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>


/* Add application styles & imports to this file! */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

@import '~ngx-sharebuttons/themes/material/material-dark-theme';
@import '~ngx-sharebuttons/themes/modern/modern-light-theme';
@import '~ngx-sharebuttons/themes/circles/circles-dark-theme';

body {
  background-color: #f9f9f9;
  font-family: 'Poppins', sans-serif;
  margin: 0;
}

h1 {
  color: #000;
  text-align: center;
}
   
h3 {
  text-align: center;
  background-color: #ededed;
  padding: 0;
  margin-bottom: 1em;
}

h4 {
  margin-top: 0.5em;
}

ul {
  padding: 0;
  margin: 0;
  display: flex;
  list-style-type: none;
  background-color: #000;
}

li {
  flex: 1;
  background-color: #000;
  margin: 0 1em;
  overflow: hidden;
}

a {
  box-sizing: border-box;
  text-decoration: none;
  padding: .3em;
  display: inline-block;
  text-align: center;
  width: 100%;
  height: 100%;
  color: white;
  font-weight: bold;
  transition: background-color ease-in-out 200ms;
}

.active {
  background-color: rgba(0,0,0, 0.25);
}

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

Related Posts

About The Author