Adding the social media share buttons component to an Angular application
Introduction
Angular is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 15 and Google is the main maintainer of the project.
ngx-sharebuttons is a share buttons component library with many social media supported.
Prerequisites
Before you start, you need to install and configure the tools:
Getting started
Create the Angular application
1. Let’s create the application with the Angular base structure using the @angular/cli with the route file and the SCSS style format.
2. Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post 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.
4. Configure the ngx-sharebuttons library. Change the angular.json file and add the circles-dark-theme.scss file as below.
5. Import the ShareButtonsModule and ShareIconsModule modules. Change the app.module.ts file and add the lines as below.
6. Remove the contents of the AppComponent class from the src/app/app.component.ts file.
7. Remove the contents of the src/app/app.component.html file. Add the buttons component as below.
8. Run the application with the command below.
9. Ready! Access the URL http://localhost:4200/ and check if the application is working. See the application working on GitHub Pages and Stackblitz.
The application repository is available at https://github.com/rodrigokamada/angular-sharebuttons.
This tutorial was posted on my blog in portuguese.
