live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Angular ngx-sharebuttons Example to Embed Social Media Sharing Buttons & Icons in TypeScript
Jan 26, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-ngx-sharebuttons-example-to-embed-social-media-sharing-buttons-icons-in-typescript/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a Angular
0:04
JS angular package which is specifically
0:07
used for sharing this social media
0:09
sharing buttons and icons you can see it
0:12
supports all social media networks
0:14
Facebook Twitter messenger Tumblr
0:16
Twitter LinkedIn uh Reddit WhatsApp so
0:20
you can have any shape it can have
0:22
circular icons it can have these
0:24
rectangular shapes and you can embed
0:28
this inside your angular website it's
0:31
very much helpful and as soon as I click
0:34
the Facebook one you will see the
0:35
Facebook window will open and you will
0:38
be redirected to your timeline and you
0:39
can directly share it inside your
0:41
Facebook same with other networks so
0:45
simply the edit one will open and you
0:47
will be able to share it and same goes
0:50
with WhatsApp they will open WhatsApp
0:52
web depending upon the device if your
0:55
mobile device they will open directly
0:58
and same goes with email Messenger as
1:01
well so the package name is ngx share
1:06
button so if you go to npmjs.com uh this
1:09
is actually the
1:10
package so if you just write here ngx
1:14
share buttons this is actually the name
1:17
of the
1:19
package so the command is very simple
1:22
you install it so if you need the full
1:25
source code I've given a step by step
1:27
blog post on my website so it's almost
1:29
having 15,000 weekly downloads so now to
1:32
get started I will show you step by step
1:35
what you need to do so let me delete
1:38
everything so first of all if you want
1:40
to register this you need to go to your
1:43
this app. module. TS file to register
1:47
this module so what we do we simply
1:51
write these two import statements so we
1:54
say
1:56
import uh share
1:58
button mod
2:00
and it will be coming from this
2:02
ngx share buttons slash buttons and also
2:07
if you want to show instead of buttons
2:10
you need to show icons there is also
2:12
support for that as well we simply
2:15
import
2:18
this icons so we have two two things
2:22
here share buttons module and share
2:24
icons module so now we need to go to the
2:27
Imports array and simply register it so
2:29
we simply
2:30
one by one share
2:41
buttons so in this
2:46
way you can simply register it ngx share
2:51
buttons
3:00
so you can go to the description link
3:02
where I've written a step by step blog
3:06
post so just put a comma here and now
3:10
the configuration is complete you can
3:12
close this file and then go to your cap.
3:15
component. HTML file and wherever you
3:17
need to embed these buttons you directly
3:20
put a div tag and inside this I will
3:23
just give it a class of container
3:30
and inside this we simply use this
3:33
directive share
3:35
buttons and we close the tag here so by
3:39
default it will look something like this
3:40
black and white uh if you directly embed
3:44
this so it has if you click on the
3:46
Facebook one it will automatically open
3:48
the Facebook but now we can directly
3:51
pass some options right here first
3:53
option will be the theme here you can
3:55
say if you want to change it into
3:57
circles you will say theme
4:00
I want these icons to appear in the form
4:03
of circles so now you will see the icons
4:06
will change into
4:07
circles the second option it takes is if
4:11
you want to specifically include only a
4:14
certain number of networks if you don't
4:17
want to show all the networks you can
4:19
simply say I want to show the copy
4:21
button and then I need to show the
4:24
Facebook one
4:30
so in this
4:32
way there is a include property and here
4:35
you can directly mention which networks
4:37
you want to see so only these networks
4:39
will show so if I delete everything and
4:42
only say copy and Facebook so these two
4:45
will show so in this way you can control
4:48
this using this directive include and
4:50
here you can specify all the networks
4:52
that you want to show so I basically
4:55
pasted all the social media networks so
4:57
all the social icons are showing the
5:00
third option is if you want to show it
5:02
in a form of a icon you say this
5:05
property to true so now it appears in
5:08
the form of a icon so you can set this
5:11
property show icon to true the fourth
5:14
one is what text that you want to show
5:18
so you can even customize this as
5:22
well so if you put this property to true
5:26
now at the bottom side the user will
5:28
specifically know which network is which
5:32
this is the copy link button so your
5:33
copy to clipboard this is the Facebook
5:35
email messenger mix so at the bottom
5:38
side you will see the network name as
5:41
well so if you want this theme you can
5:44
put this option to
5:46
True uh next one we can control the URL
5:49
which URL that you want to share so
5:51
let's suppose I want to share my website
5:53
which is free mediat tools.com
5:56
so here you can specify the UR
6:00
whatever URL that you want to share so
6:03
as soon as you click the Facebook one
6:04
you will see automatically this URL will
6:07
be pasted which is free media tools you
6:10
can directly click on
6:12
share
6:15
so then you can even give it a
6:18
description as
6:21
well this is a simple
6:24
website so again the user clicks the
6:27
Facebook one this description will be
6:30
pasted automatically
6:34
so that's these are all the options it
6:37
takes so if you want the modern theme
6:40
you can change this
6:42
to Modern dark so now it change to
6:46
rectangle shape so here this is the
6:48
theme that it
6:50
controls so these are all the options it
6:55
is there inside this package you can
6:58
directly use it first of all configure
7:01
it by going to app. module and then
7:03
inside your template you can directly
7:04
show these social media sharing buttons
7:07
and icons inside your angular
7:09
application so thank you very much guys
7:12
for watching this video and uh do visit
7:15
my website which is free mediat
7:17
tools.com uh which contains thousands of
7:20
tools regarding audio video and image
7:23
and I will be seeing you guys in the
7:25
next video
#Online Goodies
#Social Network Apps & Add-Ons