Up next in 10
Angular ngx-json-viewer Example to Build JSON Viewer With Syntax Highlighter inside Browser
Jan 26, 2025
Get the full source code of application here: https://codingshiksha.com/angular/angular-ngx-json-viewer-example-to-build-json-viewer-with-syntax-highlighter-inside-browser/ 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/
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:05
package which is useful for viewing your
0:08
Json files right in the browser itself
0:10
so this is actually the package name ngx
0:14
Json viewer and if you
0:16
just go to npmjs.com
0:20
uh just search for this package ngx Json
0:25
viewer so here you can simply view your
0:28
Json files right in theow browser itself
0:30
inside angular application using this
0:32
module the command the command is simple
0:36
I have already installed it it's almost
0:38
having
0:40
50,000 uh weekly
0:42
downloads so I will show you step by
0:46
step what to do right here so inside
0:50
your this file which is app. module. TS
0:53
file we need to register this first of
0:56
all so
1:00
let me just delete everything and start
1:01
from
1:06
scratch so you can go to the description
1:08
link where I have written a step by step
1:10
blog post
1:12
where you can get all the example code
1:15
the link is given in the description so
1:16
first of all you need to go to this file
1:18
app. module. typescript file and need to
1:21
register this module so first of all for
1:23
registering it we need to add this
1:25
import line import ngx
1:31
Json viewer
1:34
module and this will be coming from this
1:37
package ngx Json viewer so first of all
1:41
you import this module by using this
1:43
import statement and then you add this
1:45
module in the Imports
1:48
s like this so we added this you will
1:51
see that now you can close this file you
1:54
can come to the app. component. HTML
1:57
file
2:02
and then we need to first of all edit
2:04
the app. component. typescript file and
2:06
here you need to dis actually declare
2:08
and Json object right here whichever
2:10
Json object you want to display in the
2:12
browser so this Json will be very simple
2:16
cly bracket and you write the properties
2:19
here name then we have the age property
2:23
so this is actually a simple object that
2:25
I declared data object which have two
2:28
properties
2:32
name and age now we need to display this
2:36
object right in the browser itself for
2:38
this you need to edit the app.
2:40
component. HTML file and right here we
2:44
can use this directive
2:46
ngx Json
2:52
viewer and right here it actually takes
2:55
a property here which is whichever Json
2:57
that you want to display so we have the
3:00
Json property and you will specifically
3:04
reference the data object that we
3:05
declared so you will see name and H so
3:09
with clear syntax highlighting this is
3:12
actually the property name this is
3:14
actual value and this is our object
3:17
right here you can have more properties
3:18
here let's suppose I
3:20
say
3:22
uh let me contain an array of object
3:25
right here
3:31
so you can even have nested objects as
3:34
well
3:39
so so now you can see Mark marks is
3:43
actually an array of object so each
3:45
property is you can see it is having the
3:48
first property so we can repeat this we
3:50
can put a comma so we have an array of
3:55
objects so in this way it clearly
3:59
highlights this is actually the property
4:02
name this is an array of object the
4:04
marks here so array holding four
4:07
properties and it clearly showing right
4:10
here you will see science math then you
4:13
can just elongate here and then it will
4:15
show you the overall object so this is a
4:19
nice little module in angular where it
4:21
allows you to view your Json files
4:24
directly in the browser itself using
4:27
this package that I showed you step by
4:29
step in this video video if you still
4:31
want the full source code you can go to
4:32
the description link to get all the
4:34
source code so this is a nice little
4:36
package ngx Json Vier so thank you very
4:39
much for watching this video and also
4:40
check out my website as well free mediat
4:43
tools.com uh which contains thousands of
4:45
tools regarding audio video and image
4:48
and I will be seeing you guys in the
4:49
next video
#Programming
#Software