Up next in 10
Build a Angular PDF Editor in Browser to Merge & Delete Pages Using PDF-LIB in Browser Using TS
Dec 13, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-angular-pdf-editor-in-browser-to-merge-delete-pages-using-pdf-lib-in-browser-using-ts/
Show More Show Less View Video Transcript
0:00
Welcome to this uh live stream. So in
0:02
this live stream, I will actually show
0:03
you a PDF editor that I developed inside
0:07
Angular 18 to actually merge or delete
0:11
pages inside the PDF document. So this
0:14
is actually hosted on my website
0:16
freemediatools.com.
0:18
If you visit this website, this is my
0:20
website here. And if you go to the
0:22
bottom page right here, this is a tool
0:24
that I added visual PDF editor to merge
0:27
or delete pages. So if you go to this
0:30
tool, you will actually find this
0:31
interface. You can drag and drop your
0:34
PDF file or you can pick a PDF file that
0:37
you want to. So
0:39
let me pick a file right here.
0:42
PDF file which contains these two pages
0:45
right here. There is this dustpin icon
0:47
available where you can actually delete
0:50
the pages right here. Or we can add
0:53
multiple files as well by clicking this
0:55
plus icon or we can even click this icon
0:57
as well. So you can add multiple files
1:00
right here. Again if I write the if I
1:03
add the same file now it contains four
1:05
pages right here. You can individually
1:07
rearrange by clicking the click click
1:11
button in the mouse you can
1:14
rearrange them like this at any
1:17
location. You can delete the pages right
1:20
here or we can rearrange the ordering
1:22
here like this. Very simple drag and
1:24
drop. So this is actual visual live
1:26
editor that I developed inside Angular.
1:28
You can drag and drop the numbering of
1:30
the pages or you can delete them like
1:32
this or you can just select them
1:36
multiple PDF files right here. Let me
1:39
select this one as well. So now it
1:41
contains a lot of pages inside this. So
1:43
if you have a lot of pages inside PDF,
1:46
if you want to reorder them specifically
1:48
at which location, you can do this very
1:51
easily using this live editor of PDF.
1:54
And we actually use the PDF lib library.
1:57
So after you are happy with the
1:58
ordering, you can simply click the
2:00
download button. So now your PDF file
2:02
will be downloaded. So it will actually
2:04
contain all these pages. The files will
2:06
be merged and it will also maintain the
2:09
order. So whichever order that you do.
2:12
So if you want to move this page at the
2:14
starting now if you download this you
2:16
will actually see that page in the
2:18
beginning. So now the first page is this
2:20
one. Now this is the second page third
2:22
page all these stuff. So now if you want
2:25
to individually delete some pages you
2:27
can click the dust pin icon. So you can
2:30
it will delete those pages like this.
2:36
So it's very easy guys. You can see we
2:38
can click the delete button. So those
2:41
pages will be removed. So now only these
2:44
pages are there. 1 2 3 4 5 6 7 14 pages
2:48
are there. So
2:50
you can see how easily you can remove
2:52
the pages. You can reorder the
2:54
numbering. You can shift which pages to
2:59
you can uh just change the
3:04
re rearrange the pages in the PDF. So
3:07
you can see that now only 10 pages are
3:09
there. So this is actual project that I
3:12
made guys. If you see you can even
3:14
change the properties of the PDF
3:16
document as well. You can just change
3:19
the title, author, subject, keywords,
3:22
all that stuff. And then we have this I
3:25
developed this. So just simply
3:28
so this is actually the overall project.
3:31
This is a full project here that I'm
3:33
giving you. The link is given in the
3:35
description. So you can go to my website
3:37
procodestore.com and directly purchase
3:39
the full source code. So after you
3:41
purchase it, you will be redirected to
3:44
Google Drive where you will actually get
3:45
this zip file. You need to extract the
3:48
zip file and this will be the actual
3:50
directory structure. We have the
3:51
different components out there. You will
3:53
see for different functionality the fun
3:55
uh the full application and split it
3:58
into angular components. Each component
4:00
is doing its own job. And uh then if you
4:03
if I show you the package.json JSON
4:05
file. These are the dependencies we are
4:07
using. We're using the latest version of
4:09
Angular which is 18 at the time of
4:11
recording this live stream. It is
4:13
compatible with all the versions. So
4:15
don't need to worry about it. And we are
4:17
actually using the PDF lib library,
4:20
PDFJS disc library. So you can try out
4:24
this tool before purchasing it at the
4:25
checkout page. I have given this link.
4:28
So you can basically try out this tool
4:31
before you purchase it. So
4:34
after you do this, after you purchase
4:36
it, you after you extract all the files,
4:40
you need to go to in order to run this.
4:44
I'm already
4:46
if you want to run this locally, it's
4:49
very simple. Just go to cmd and just
4:52
type here npmi. So this will install all
4:54
the modules and it will actually create
4:57
a node modules folder right inside your
4:59
root directory. So this will install all
5:01
the packages which are mentioned in the
5:03
package.json file and then you just need
5:05
to write here npm run start. So this
5:08
will actually start the angular
5:10
application at port number localhost
5:13
4200.
5:15
So it will just start your application.
5:18
So,
5:21
so it is just compiling all the assets,
5:24
all the packages into the actual
5:28
application which will listen on
5:30
localhost 4200.
5:33
You can see application compiled and it
5:36
is running on localhost 4200. So if I
5:38
open localhost 4200.
5:42
So now this is your application.
5:46
So local host 4200.
5:50
So this is the same app and now you can
5:52
choose your PDF file. You can choose
5:54
multiple files at one time as well like
5:57
this. So multiple files we have chosen.
6:00
You can uh rearrange the numbering. You
6:03
can merge them, delete the pages and
6:05
then you can download it. So this is
6:08
overall project guide. It makes it very
6:09
much easy. you it will save a lot of
6:12
time for you because you don't need to
6:14
manually merge or delete pages. You can
6:16
do it using this live visual PDF editor
6:19
that I developed in Angular 18 the
6:21
latest version and we have used PDF lib
6:24
library for the
6:26
so the link is given guys you can
6:28
directly purchase the full source code.
6:29
This will be a complete project that I
6:31
will give you. You can then modify this
6:33
code as well or you can use this code
6:36
and if you want to deploy this uh you
6:38
can build out this application the build
6:40
process is very simple. There is a
6:42
simple command in angular you can just
6:44
write npm run build. So this will
6:46
actually create a dist folder right
6:48
inside your root directory where you can
6:51
have your static assets and the minified
6:54
CSS and the JavaScript code. So it is
6:57
just building your application for
6:58
production. So it's it is that easy. And
7:02
now you can see it has created this disc
7:04
folder and it contains all your minified
7:08
JavaScript and the minified CSS code. So
7:10
you can just purchase a domain name and
7:12
then you can deploy this project very
7:14
easily. Any sort of hosting you can do
7:17
and then you can deploy this very
7:19
easily. This is the overall project
7:21
guys. And for the library, if you don't
7:24
know about PDF lip, this is a
7:27
open-source library for building uh PDF
7:30
level applications for modifying PDFs.
7:34
So PDF lip. So we have actually used
7:36
this library PDF lip and you can just
7:38
read the documentation all these you can
7:42
watermark PDF, you can merge, split,
7:44
delete pages, everything you can do it.
7:46
So we have used integrated this inside
7:48
your angular application and used it to
7:51
actually build out this awesome looking
7:52
PDF editor which does all these tasks
7:55
that I showed you. And if you still have
7:57
a any sort of problem after purchasing
8:00
you can contact me at my email and phone
8:02
number at which is mentioned on my the
8:05
pro code store website. So this is the
8:08
overall project guys. Please hit that
8:10
like button, subscribe the channel as
8:12
well if you're watching it for the very
8:13
first time. So you can see all these
8:15
components are coded inside HTML. This
8:18
is a SAS we have used for the styling
8:21
and this is Typescript. So this is coded
8:24
inside Typescript which is a supererset
8:26
of JavaScript. Additional features are
8:28
type available. So these are different
8:31
components which are there and this is
8:33
for the drag and drop directory. So
8:36
these are different services that we
8:38
have for the upload, store, preview,
8:41
live preview, lazy dialogue, all this
8:44
stuff. So it's a overall complete
8:46
project you will see in Angular. You
8:48
will get this and this is a basic
8:53
you can see that. So everything you can
8:54
customize after you purchase it. So
8:58
this is a complete project. Drag and
9:00
drop live visual PDF editor which allows
9:03
you to delete pages, merge different
9:05
files. You can take as many PDF files.
9:08
It works in the browser. So no need to
9:11
worry about uh any sort of time. It's
9:14
blazingly fast and uh all this user
9:18
interface is pretty much very simple.
9:21
And uh thank you very much for watching
9:24
this live stream guys and I will be
9:26
seeing you in the next one.