Up next in 10
Build Angular JSON Viewer & Renderer in Browser Using ngx-json-viewer Library in TypeScript
2 views
Jun 13, 2025
Get the full source code of the application here: Official Website: https://freemediatools.com
View Video Transcript
0:01
uh hello guys welcome to this live
0:04
stream so in this live stream I will
0:05
show you a angular module which allows
0:09
you to display or render your JSON
0:11
directly in the browser with live
0:13
preview and it actually builds out with
0:16
this live editor which you can
0:18
troubleshoot your JSON so if you have a
0:20
bunch of JSON data that you want to
0:21
display inside your Angular application
0:24
so as you can see we are displaying this
0:25
JSON data it's a JSON object which has
0:28
multiple properties right here and you
0:30
can see on the right hand side it
0:32
actually have a simple editor where you
0:36
can actually clearly see the properties
0:39
of the JSON object you can drop down
0:43
like this so now we have five properties
0:46
this this is actually a array of object
0:49
it will clearly show you you can see the
0:52
actual values so it's a simple syntax
0:56
highlighter or editor for JSON files if
0:59
you want to see them inside the browser
1:01
so there is this package you need to
1:02
install first of all simply go to
1:05
npmjs.com just search for this package
1:07
which is
1:08
ngx JSON viewer so this is actually the
1:12
package name JSON formatter and editor
1:16
directly in the angular you can see that
1:19
the command is simple you simply install
1:21
this and now to simply use it I will
1:23
show you this complete example so first
1:25
of all let me just delete
1:28
everything and start from scratch so the
1:32
first step is that you need to go to
1:33
this file
1:34
app.module.ts file this is actually the
1:37
configuration file of your angular
1:38
project and here you need to import the
1:40
necessary module and right here you just
1:44
need to paste this import line which
1:47
allows you to so just write here import
1:51
inside curly
1:53
bracket we will simply import this from
1:56
this package here ngx JSON viewer and
1:59
this actually contains this module here
2:02
which is uh
2:06
ngx JSON viewer module so after that you
2:10
need to go to the imports array right
2:12
here and include this you have imported
2:15
ngx JSON viewer module so you are simply
2:19
importing it and then including it in
2:21
the imports array and then you can close
2:23
this file and then move to this
2:25
app.component.html file and here you
2:28
have this attribute whenever you install
2:31
this module simply need to write ngx
2:34
JSON
2:35
viewer opening and the closing tag here
2:38
and right here it actually accepts in
2:41
attribute here so the whatever JSON
2:44
object you want to display so simply
2:47
need to pass this property
2:50
here and we just need to now define this
2:53
variable which is data in the
2:56
app.component.ts file so whatever JSON
2:58
object you want to display so this will
3:02
be a simple JSON
3:04
object so you will simply say
3:08
name so now you will see on the right
3:11
hand side we have syntax highlighting
3:13
this is the actual property name and
3:15
this is the actual value and colon is
3:17
automatically there and similarly we can
3:20
have multiple properties
3:25
here this is a number here you can
3:30
see and now simply you can paste any
3:34
object JSON
3:37
object and then it will highlight
3:40
that with different
3:44
colors so this is a you can see if I
3:47
paste it
3:50
so you will now see it is a undefined it
3:55
will clearly tell you with these uh
3:57
actual formatting so if you want to
4:00
format your JSON directly in the browser
4:02
or highlight them you can use this
4:05
module inside your Angular project ngx
4:08
JSON viewer the process is simple you
4:10
need to go to the app.module.ts file
4:12
simply import this add this to the
4:14
imports array and then
4:18
simply use this module just pass the
4:22
data that you want to highlight right
4:23
here as a direct property and then
4:25
declare this object right in the uh
4:28
TypeScript file so this is a very simple
4:31
module for rendering your JSON directly
4:34
in the browser and thank you very much
4:37
for watching this video and also check
4:39
out my website freemediatools.com
4:42
uh which contains unlimited tools
4:44
regarding audio video and image and I
4:47
will be seeing you in the next live
4:50
stream