Angular 18 Add Social Media Share Buttons Example

Now, let's see an example of angular 18 add social media share button. I would like to share with you angular 18 social share buttons. In this article, we will implement a angular 18 social media share buttons. I explained simply step by step ngx-sharebuttons angular 18. follow the below example for add social media share buttons to angular 18 app.

Angular 18 social media share buttons can be implemented using ngx-sharebuttons. ngx-sharebuttons is an Angular library that provides easy integration of customizable share buttons for various social media platforms. With simple installation and configuration, developers can add buttons for platforms like Facebook, Twitter, LinkedIn, and more to their Angular applications, enabling users to share content seamlessly across social networks.

In this example, we will add social media buttons using the ngx-sharebuttons npm package in angular 18. We will install some other npm packages to display the social media icons as well so, follow the steps:

So, let's follow the following steps:

Step for How to Add Social Media Share Icons in Angular 18?

• Step 1: Create Angular 18 Project
• Step 2: Install ngx-sharebuttons NPM Packages
• Step 3: Update Ts File
• Step 4: Update HTML File
• Run Angular App

Let's follow the steps:

Step 1: Create Angular 18 Project

You can easily create your angular app using the below command:

ng new my-new-app

Step 2: Install ngx-sharebuttons NPM Packages

Install the @angular/cdk, @fortawesome/angular-fontawesome, @fortawesome/fontawesome-svg-core, @fortawesome/free-brands-svg-icons, @fortawesome/free-solid-svg-icons and ngx-sharebuttons libraries.

npm install @angular/cdk @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons ngx-sharebuttons

Configure the ngx-sharebuttons library. Change the angular.json file and add the circles-dark-theme.scss file as below.

angular.json

"styles": [
  "node_modules/ngx-sharebuttons/themes/circles.scss",
  "node_modules/ngx-sharebuttons/themes/modern.scss",
  "src/styles.scss"
],

Step 3: Update Ts File

here, we need to update ts file as like bellow with lat and long variable:

src/app/app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
  
import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';
  
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ShareButtonsModule, ShareIconsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   
}

Step 4: Update HTML File

here, we need to update html file as like bellow code:

src/app/app.component.html

<div class="container">
  
    <h1>Angular 18 Adding the Social Media Share Buttons Component Example - ItSolutionStuff.com</h1>
  
  <share-buttons theme="circles-dark"
    [include]="['copy', 'facebook', 'email', 'messenger', 'mix', 'line', 'linkedin', 'pinterest', 'print', 'reddit', 'sms', 'telegram', 'tumblr', 'twitter', 'viber', 'vk', 'xing', 'whatsapp']"
    [showIcon]="true"
    [showText]="false"
    url="https://www.itsolutionstuff.com/post/whats-new-in-laravel-11-new-features-and-latest-updatesexample.html"
    description="Angular 18 Share Buttons"
    twitterAccount="HardikSavani19"
    class="pt-5">
  </share-buttons>
  
  <share-buttons theme="modern-dark"
    [include]="['copy', 'facebook', 'email', 'messenger', 'mix', 'line', 'linkedin', 'pinterest', 'print', 'reddit', 'sms', 'telegram', 'tumblr', 'twitter', 'viber', 'vk', 'xing', 'whatsapp']"
    [showIcon]="true"
    [showText]="true"
    url="https://www.itsolutionstuff.com/post/whats-new-in-laravel-11-new-features-and-latest-updatesexample.html"
    description="Angular 18 Share Buttons"
    twitterAccount="HardikSavani19"
    class="pt-5">
  </share-buttons>
  
  <share-buttons theme="modern-dark"
    [include]="['copy', 'facebook', 'email', 'messenger', 'mix', 'line', 'linkedin', 'pinterest', 'print', 'reddit', 'sms', 'telegram', 'tumblr', 'twitter', 'viber', 'vk', 'xing', 'whatsapp']"
    [showIcon]="false"
    [showText]="true"
    url="https://www.itsolutionstuff.com/post/whats-new-in-laravel-11-new-features-and-latest-updatesexample.html"
    description="Angular 18 Share Buttons"
    twitterAccount="HardikSavani19"
    class="pt-5">
  </share-buttons>
  
</div>

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

Preview:

now you can check it.

I hope it can help you...