• Home
  • Reading Process
  • Body and Mind Creation
  • General Knowledge(G.K.)
  • Angular2+
  • PHP
    • WordPress
  • English Grammar

Education For Betterment

Menu
  • Angular4+
    • Overview Angular2
    • Setup Environment
    • Create Project
  • Social Development
  • Value Based
  • Reading Process
  • Social Awareness
  • Questions
    • PHP
      • Basic PHP Questions
  • Home
  • Social
    • Social Awareness
    • Social Development
    • Effects Of Population
    • Relationships
  • Life style
    • Value Based
    • Reading Process
    • Body and Mind Creation
  • Angular2+
  • English for All
  • English Grammar
  • WordPress
  • Paytm
  • General Knowledge
Home
Angular 10+
Angular 10+ Social Sharing Button

Angular 10+ Social Sharing Button

Jugal Rana September 3, 2020 Angular 10+, Angular2+ No Comments

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

  • app.component.ts
  • app.component.html
  • style.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
  •  
  •  
  •  
  •  
  • 1
  • 2
  •  
  •  
Tweet Pin It
Tags:Angular, Angular 6, Angular 7, Angular5, social share

Related Posts

Sortable Elements in Angular Application

Angular 4/5 how to form submit?

Bar Chart in Angular using Highchart

On select Font-family change for text in Angular

Lazy Load Images in Angular

3D Pie and Donut Chart in Angular using Highchart

Popup Notification Using SweetAlert2 in Angular

Drag and Drop in Angular using Angular Material

Events fire when modal open using ngx bootstrap in angular

About The Author

Jugal Rana

Applications

Online Resume Builder Demo Firebase CURD Opertion Demo

Contact Us

    • Tags
    • Popular

    Author Posts

    • Discussion on WordPress Admin screen for pages …
      January 13, 2018 No Comments
    • How Good Manners Helpful Our Betterment?
      How Good Manners Helpful Our Betterment?
      November 25, 2017 No Comments
    • Angular MultiSelect Dropdown
      August 12, 2018 No Comments
    • Applications Of Present Continuous Tense.
      January 17, 2018 No Comments
    • Why We Need To Learn Future Perfect …
      March 1, 2018 No Comments

    Like Us On Facebook

    Facebook Pagelike Widget

    Recent Posts

    • PDF Viewer in Angular 11 with NG2 …
      April 18, 2021 No Comments
    • Swiper Image Touch Slider in Angular
      April 12, 2021 No Comments
    • In Angular Upload Image, Preview & Crop …
      April 11, 2021 No Comments
    • Get Current Device Information in Angular
      December 20, 2020 No Comments
    • Print HTML in PDF using “ngx-print” in …
      December 12, 2020 No Comments

    Popular Posts

    • PDF Viewer in Angular 11 with NG2 …
      April 18, 2021 No Comments
    • Angular CRUD APP MEAN Stack Part – …
      October 3, 2020 No Comments
    • Angular CRUD APP MEAN Stack Part – …
      October 4, 2020 No Comments
    • Integrate Google Maps in Angular Application
      October 5, 2020 No Comments
    • OWL Carousel in Angular Application
      October 6, 2020 No Comments

    Recent Posts

    • PDF Viewer in Angular 11 with NG2 …
      April 18, 2021 No Comments
    • Swiper Image Touch Slider in Angular
      April 12, 2021 No Comments
    • In Angular Upload Image, Preview & Crop …
      April 11, 2021 No Comments
    • Get Current Device Information in Angular
      December 20, 2020 No Comments
    • Print HTML in PDF using “ngx-print” in …
      December 12, 2020 No Comments

    Get more stuff

    Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

    Thank you for subscribing.

    Something went wrong.

    we respect your privacy and take protecting it seriously

    Education For Betterment Copyright © 2021.
    Privacy Policy Theme by MyThemeShop