Introduction is a development platform for building WEB, mobile, and desktop applications using HTML, CSS, and TypeScript (JavaScript). Currently, Angular is at version 14, and Google is the main maintainer of the project. Angular is a share buttons component library with many social media supported. ngx-sharebuttons Prerequisites Before you start, you need to install and configure the tools: git Node.js and npm Angular CLI IDE (e.g. ) Visual Studio Code Getting started Create the Angular application Let’s create the application with the Angular base structure using the with the route file and the SCSS style format. 1. @angular/cli ng new angular-sharebuttons
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE angular-sharebuttons/README.md (1065 bytes)
CREATE angular-sharebuttons/.editorconfig (274 bytes)
CREATE angular-sharebuttons/.gitignore (604 bytes)
CREATE angular-sharebuttons/angular.json (3291 bytes)
CREATE angular-sharebuttons/package.json (1082 bytes)
CREATE angular-sharebuttons/tsconfig.json (783 bytes)
CREATE angular-sharebuttons/.browserslistrc (703 bytes)
CREATE angular-sharebuttons/karma.conf.js (1437 bytes)
CREATE angular-sharebuttons/tsconfig.app.json (287 bytes)
CREATE angular-sharebuttons/tsconfig.spec.json (333 bytes)
CREATE angular-sharebuttons/src/favicon.ico (948 bytes)
CREATE angular-sharebuttons/src/index.html (305 bytes)
CREATE angular-sharebuttons/src/main.ts (372 bytes)
CREATE angular-sharebuttons/src/polyfills.ts (2820 bytes)
CREATE angular-sharebuttons/src/styles.scss (80 bytes)
CREATE angular-sharebuttons/src/test.ts (788 bytes)
CREATE angular-sharebuttons/src/assets/.gitkeep (0 bytes)
CREATE angular-sharebuttons/src/environments/environment.prod.ts (51 bytes)
CREATE angular-sharebuttons/src/environments/environment.ts (658 bytes)
CREATE angular-sharebuttons/src/app/app-routing.module.ts (245 bytes)
CREATE angular-sharebuttons/src/app/app.module.ts (393 bytes)
CREATE angular-sharebuttons/src/app/app.component.scss (0 bytes)
CREATE angular-sharebuttons/src/app/app.component.html (24617 bytes)
CREATE angular-sharebuttons/src/app/app.component.spec.ts (1115 bytes)
CREATE angular-sharebuttons/src/app/app.component.ts (225 bytes)
✔ Packages installed successfully. Install and configure the Bootstrap CSS framework. Then, do steps 2 and 3 of the post, . 2. Adding the Bootstrap CSS framework to an Angular application Install the , , , , and libraries. 3. @angular/cdk @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons ngx-sharebuttons 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 library. Change the file and add the file as below. 4. ngx-sharebuttons angular.json circles-dark-theme.scss "styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "node_modules/ngx-sharebuttons/themes/circles.scss",
  "node_modules/ngx-sharebuttons/themes/modern.scss",
  "src/styles.scss"
], Import the and modules. Change the file and add the lines as below. 5. ShareButtonsModule ShareIconsModule app.module.ts import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';

imports: [
  BrowserModule,
  AppRoutingModule,
  ShareButtonsModule,
  ShareIconsModule,
], Remove the contents of the class from the file. 6. AppComponent src/app/app.component.ts Remove the contents of the file. Then, add the buttons component as below. 7. src/app/app.component.html <div class="container-fluid py-3">
  <h1>Angular Share Buttons</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://rodrigo.kamada.com.br/"
    description="Angular Share Buttons"
    twitterAccount="rodrigokamada"
    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://rodrigo.kamada.com.br/"
    description="Angular Share Buttons"
    twitterAccount="rodrigokamada"
    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://rodrigo.kamada.com.br/"
    description="Angular Share Buttons"
    twitterAccount="rodrigokamada"
    class="pt-5">
  </share-buttons>
</div> Run the application with the command below. 8. npm start

> angular-sharebuttons@1.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   3.84 MB
styles.css          | styles        | 277.56 kB
polyfills.js        | polyfills     | 128.52 kB
scripts.js          | scripts       |  76.67 kB
main.js             | main          |  11.54 kB
runtime.js          | runtime       |   6.64 kB

                    | Initial Total |   4.33 MB

Build at: 2021-08-22T20:20:39.646Z - Hash: b18162a20902dbc8f4cf - Time: 20556ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully. Ready! Access the URL and check if the application is working. See the application working on and . 9. http://localhost:4200/ GitHub Pages Stackblitz The application repository is available at . https://github.com/rodrigokamada/angular-sharebuttons This tutorial was posted on my in portuguese. blog

Too Long; Didn't Read

Making security fun one episode at a time

Adding the social media share buttons component to an Angular application

Too Long; Didn't Read

Rodrigo Kamada

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Adding the social media share buttons component to an Angular application

Too Long; Didn't Read

Rodrigo Kamada

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES