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:
- git
- Node.js and npm
- Angular CLI
- IDE (e.g. Visual Studio Code)
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.
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. 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.
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 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.
<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>
8. Run the application with the command below.
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.
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.
Top comments (3)
Integrating social media share buttons into an Angular app can enhance user engagement. You might want to use libraries like ngx-share-buttons for easy implementation. Additionally, if you're looking to connect with developers or share your progress in tech-focused groups, Telegrouplinkz can help you find Telegram groups where Angular enthusiasts discuss solutions and share tips. It's a great way to stay updated and collaborate with others!
Digital marketing firm is a company that specializes in marketing, specializing in digital marketing, social media marketing and other forms of internet marketing. The main objective of digital marketing firm is to provide services and products that will help their clients increase their sales and profits. Additionally, digital marketing firm Hamilton ON are also responsible for creating strategies that will help them grow their business. Digital marketing firms use various techniques that can be used to help increase the sales of their clients. These techniques include SEO, SEM, PPC, SMM and email marketing.
If you want to schedule posts on your social media promorepublic.com/en/social-media-... accounts in advance, Later is a great alternative to consider. You can track your viewership, plan posts in advance, and assess the effectiveness of your content. The lifetime access is also provided at no cost. Twitter, along with Facebook and Instagram, may all be used with this app. After signing up, you'll have access to the service's robust post editor, where you can create content and arrange for its subsequent distribution across many networks at once. In addition, you may modify the existing hashtags in your material if you so like.