How to add ngx-sharebuttons in Angular

In this article we will learn how to add ngx-sharebuttons in angular.

Step : 1

Let’s start :

npm i ngx-sharebuttons

npm i @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Step 2 :  After Installing the ngx-chart now import the ngx-chart in app.module.ts.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';

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

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

Step 3 : app.component.html

<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://ngx-sharebuttons.netlify.app/#/'"
 [image] ="'https://www.eduforbetterment.com/wp-content/uploads/2020/08/qrcode.jpg'"
 [autoSetMeta]="false"
></share-buttons>
</div>

now using below command  we can see the output:

ng serve