Angular 14 ngx-sharebuttons Example to Embed Material Theme Social Sharing Buttons in TypeScript

Welcome folks today in this blog post we will be using the ngx-sharebuttons library to embed material theme social sharing buttons in angular 14 using typescript. All the full source code of the application is shown below.

Get Started

In order to get started you need to create the new angular project using the below command

ng new sampleapp

cd sampleapp

And now you need to install the below libraries using the below command as shown below

npm i ngx-share-buttons

And after that you will see the below directory structure of the angular app as shown below

And now you need to go to app.module.ts file and copy paste the following code

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ShareButtonsModule.withConfig({
      debug: true
    }),
    ShareIconsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

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

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';

import { ShareIconsModule } from 'ngx-sharebuttons/icons';

@NgModule({

imports: [

BrowserModule,

FormsModule,

ShareButtonsModule.withConfig({

debug: true

}),

ShareIconsModule

declarations: [

AppComponent

bootstrap: [

AppComponent

]

})

export class AppModule { }

Now we need to go to app.component.html file and copy paste the below html code as shown below

app.component.html

<h1>Share Button With Square Shape</h1>
<div style="    text-align: center;">
<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>
</div>
<br><br>
<h1>Share Button With Round Shape</h1>
<div style="    text-align: center;">
<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>
</div>
<br><br>
<h1>Share Button With Round Shape With Text</h1>
<div style="    text-align: center;">
<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>
</div>

<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>

</div>

<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>

</div>

<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>

</div>

As you can see we are rendering the share-buttons widget where we have different social networks and here we are inserting some attributes for the size and url. And also the image also which are you sharing.