Up next in 10
Angular ngx-copy-to-clipboard Example to Implement Copy to Clipboard in HTML Input Form Fields in TS
Jun 13, 2025
Get the full source code of the application here:
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:01
uh hello guys uh welcome to this video
0:03
so in this video I'll show you a package
0:06
inside Angular which allows you to
0:08
import integrate the copy to clipboard
0:11
functionality so let's suppose I write
0:14
something inside this text area and if
0:17
for some reason I need to copy to
0:19
clipboard which is a very common
0:20
functionality in any web application so
0:23
we simply click the copy button and you
0:25
will see all your data will be
0:27
successfully copied to clipboard and now
0:30
you can
0:31
paste this data anywhere you want to do
0:35
this as you can see so it's very simple
0:38
you can
0:40
actually copy any data related to any
0:43
HTML element you can integrate this
0:45
functionality and now you can see as
0:48
soon as I click the copy button
0:49
automatically that data will be copy and
0:52
pasted so there is this package here uh
0:55
if you go to npmjs.com just search for
0:58
this package which is
1:01
ngx-
1:04
clipboard so this is essentially this
1:07
package here and it's very easy to
1:09
integrate inside an angular application
1:11
first of all you need to install this so
1:14
the command is simple npm ngx clipboard
1:17
it's almost got 160,000 weekly downloads
1:21
it's a pretty popular package and I will
1:24
show you this complete example so now
1:27
let me just delete everything and start
1:29
from
1:33
scratch and the very first thing we need
1:36
to do guys inside this file here of your
1:39
angular project just go to app
1:41
domodule.ts ts file and right here you
1:44
need to register this module for
1:46
registering it you just need to add this
1:48
import line which is import in double
1:52
curly bracket here you simply say ngx
1:56
copy to
1:59
clipboard module and this will be coming
2:02
from this package which is ngx copy to
2:06
clipboard sorry I just misspelled the
2:10
module here this is not ngx clipboard
2:13
this is ngx copy to clipboard this is
2:16
the
2:21
package so the command will be simple
2:24
you first of all install this you can
2:27
see
2:29
that it's also got fairly new package
2:32
395 weekly download so first of all you
2:35
import this inside this and then go to
2:37
the imports array and then include this
2:40
module and for this you do require the
2:43
forms module of angular as well which is
2:46
a built-in module simply import this as
2:48
well and add this to the imports array
2:51
and then you just need to go to the
2:53
app.component html file your template
2:56
file and right here we just need to
2:58
declare
3:00
some variables so first of all you'll be
3:03
having a
3:05
section where it will just have a text
3:09
area you can take any HTML element it
3:13
can be a heading paragraph anything but
3:15
for this example I'm taking this text
3:18
area input form element and here you
3:21
simply give it a name attribute first of
3:24
all the text content and most
3:27
importantly in order to do the copy to
3:29
clipboard you just need to give it an
3:31
unique ID so to any target HTML element
3:36
so we given this ID here so now using
3:39
this ID we will target this element and
3:42
then whatever is present right here will
3:44
be copied to
3:47
clipboard so now we have a simple text
3:50
area where we can write something you
3:52
can see that now after that we
3:57
will have
4:00
this component which is ngx copy to
4:04
clipboard so here you simply declare
4:07
this custom component opening and
4:11
closing tag and now it takes some
4:14
parameters you can just do this as well
4:16
like
4:20
this and here it takes some parameters
4:23
so here you need to specify first of all
4:25
the target element which element you are
4:28
targeting so here you simply
4:31
uh give the id here or the name
4:35
attribute so you have given this ID as
4:39
text content so you'll simply say hash
4:43
because we are targeting ID here and
4:45
then whatever is the action you are
4:47
doing so we are doing the cut operation
4:50
so we need to copy to clipboard and then
4:54
we have a series of call back functions
4:56
so when the operation is successful then
4:59
you will have this success call back and
5:01
here we can assign a custom call back
5:04
function and similarly for error as well
5:06
if any sort of error take place you will
5:08
have this function on
5:11
error and then you can
5:16
actually have a button right here which
5:19
will
5:21
be copy button
5:24
so we have the copy to clipboard button
5:27
and now we need to define this functions
5:32
on success and on
5:36
error in the typescript so right here we
5:39
need to first of all declare the actual
5:42
variable which will be responsible for
5:44
copying the text so we declared this
5:46
variable copied
5:48
text it is will be empty by default and
5:52
then inside the constructor we need to
5:54
define both these functions which is on
5:58
success this dot on success bind
6:02
this and similarly for error as
6:10
well you bind
6:13
this so inside this constructor we are
6:16
doing all these things
6:25
now we just need to define both these
6:27
functions so on
6:28
success we will have the event and
6:31
simply we'll say this.copy text is equal
6:33
to
6:34
e.ext and similarly for on
6:38
error if any sort of error take place
6:41
then we can
6:42
simply
6:44
say an error take
6:50
place and then uh we declared this copy
6:53
text variable we can print it out in the
6:56
HTML inside a simple paragraph so
6:59
whatever text has been copied to
7:01
clipboard it can display itself copy
7:04
text is in double curly bracket we are
7:07
displaying this variable so now if you
7:08
write something click on this button of
7:11
copy to clipboard you will see all your
7:13
data will successfully be copied to
7:15
clipboard and display right here so
7:17
whatever you write here again click copy
7:20
you will see the copy to clipboard
7:21
operation is successful so this is a
7:24
very useful module in angular you can
7:26
simply integrate this i shown you
7:28
step-by-step process you first of all
7:30
include this line in app.module.ts then
7:33
you simply inside app do.component
7:36
component html do this uh thank you very
7:41
much for watching this video and uh also
7:44
check out my website
7:46
freemediatools.com which contains
7:48
unlimited number of tools regarding
7:50
audio video and image uh I will be
7:53
seeing you in the next live stream
#Programming
#Software