Adding the Social Media Share Buttons Component to an Angular App

Angular is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 13 and Google is the main maintainer of the project.

ngx-sharebuttons is a share button component library with many social media supported.

Before you begin, you need to install and configure the tools:

Create the Angular app

1. Let’s create the application with the Angular base structure using the @angular/cli with route file and SCSS style format.

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.

2. Install and configure the Bootstrap CSS framework. Then do steps 2 and 3 of the publication, Adding the Bootstrap CSS framework to an Angular application.

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

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

"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"
],

5. Import the ShareButtonsModule and ShareIconsModule modules. Change the app.module.ts file and add the lines as below.

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

imports: [
  BrowserModule,
  AppRoutingModule,
  ShareButtonsModule,
  ShareIconsModule,
],

6. Remove the contents of the AppComponent class of the src/app/app.component.ts to file.

seven. Remove the contents of the src/app/app.component.html to file. Then add the buttons component as below.

Angular Share Buttons

8. Run the app with the command below.

npm start

> [email protected] 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.

9. Ready! Go to URL http://localhost:4200/ and check if the app is working. See the app running on GitHub Pages and Stackblitz.

The app repository is available at https://github.com/rodrigokamada/angular-sharebuttons.

This tutorial was posted on my blog in Portuguese.


Source link

Comments are closed.