uh hello guys welcome to this video so
in this video I will show you a angular
package which is useful for viewing your
Json files right in the browser itself
so this is actually the package name ngx
Json viewer and if you
just go to npmjs.com
uh just search for this package ngx Json
viewer so here you can simply view your
Json files right in theow browser itself
inside angular application using this
module the command the command is simple
I have already installed it it's almost
having
50,000 uh weekly
downloads so I will show you step by
step what to do right here so inside
your this file which is app. module. TS
file we need to register this first of
all so
let me just delete everything and start
from
scratch so you can go to the description
link where I have written a step by step
blog post
where you can get all the example code
the link is given in the description so
first of all you need to go to this file
app. module. typescript file and need to
register this module so first of all for
registering it we need to add this
import line import ngx
Json viewer
module and this will be coming from this
package ngx Json viewer so first of all
you import this module by using this
import statement and then you add this
module in the Imports
s like this so we added this you will
see that now you can close this file you
can come to the app. component. HTML
file
and then we need to first of all edit
the app. component. typescript file and
here you need to dis actually declare
and Json object right here whichever
Json object you want to display in the
browser so this Json will be very simple
cly bracket and you write the properties
here name then we have the age property
so this is actually a simple object that
I declared data object which have two
properties
name and age now we need to display this
object right in the browser itself for
this you need to edit the app.
component. HTML file and right here we
can use this directive
ngx Json
viewer and right here it actually takes
a property here which is whichever Json
that you want to display so we have the
Json property and you will specifically
reference the data object that we
declared so you will see name and H so
with clear syntax highlighting this is
actually the property name this is
actual value and this is our object
right here you can have more properties
here let's suppose I
say
uh let me contain an array of object
right here
so you can even have nested objects as
well
so so now you can see Mark marks is
actually an array of object so each
property is you can see it is having the
first property so we can repeat this we
can put a comma so we have an array of
objects so in this way it clearly
highlights this is actually the property
name this is an array of object the
marks here so array holding four
properties and it clearly showing right
here you will see science math then you
can just elongate here and then it will
show you the overall object so this is a
nice little module in angular where it
allows you to view your Json files
directly in the browser itself using
this package that I showed you step by
step in this video video if you still
want the full source code you can go to
the description link to get all the
source code so this is a nice little
package ngx Json Vier so thank you very
much for watching this video and also
check out my website as well free mediat
tools.com uh which contains thousands of
tools regarding audio video and image
and I will be seeing you guys in the
next video