uh Hello friends welcome to this video
so in this video I will show you how to
build out a vs code editor inside your
angular application where you can
actually write code inside any language
so you can see we actually get these
automatic suggestions as well so I'm
writing the PHP code so it is having
this nice little syntax highlighting
alongside with the line numbers as well
so it supports multiple languages with
multiple themes so I can change the
language to JavaScript now so now what
happens you will be able to write
JavaScript code so right here it's a
simple little editor code dat editor so
there is a package here specifically
built for angular applications which
allows you to integrate this code editor
with syntax
highlighting so you can even pass
multiple themes if I change it to
vs so this is I think
vs Black
theme yeah so it actually have various
themes available to us you will see
that so you will see these automatic
suggestions also so there is a package
here uh which is there if you search on
npmjs.com
at theate NG stack code editor this is
actually the name of the
package the command is simple you
install this package and it's almost
having 2600 weekly downloads so I've
written a step by-step blog post on my
website alongside with the full example
code you can go to the description to
get all the source codes so the very
first thing we need to do we need to go
to your app. module. typescript file and
just add this import
statement so import code editor module
which will be coming from this package
at theate NG stack code editor and then
you go to the import set AR and then add
this code editor module. for root this
is all the configuration which is needed
so once you do this you come to your
app. component. HTML so we declare this
editor we have
this directive available to us ngx code
editor the opening and the closing tag
so in this way you can initialize this
code editor and here you need to pass
some options first of all the theme
options so here you can pass the theme
here which is
vs dark so this will make your theme as
vs
Star so in this way you will get all
these
suggestions so then we also have the
option to attach a
language so let's suppose now I want to
Target the PHP language so I just need
to pass PHP so now I will be able to
write the PHP code it's that easy you
can see that the syntax highlighting
will be there for each language
automatically so now in the typescript
file if you
see we
can it's that easy guys you can see that
so
but here we do need to include some
options right here first of all your
dependencies and the actual options so
if you do need the context menu as well
you can provide these dependencies one
by one such as the code editor it's the
array of dependencies we are passing
right here and also these options if you
need the context menu then you can even
provide them inside your options so
context menu through mini map enabled so
here you can pass these options
dynamically so there is an option right
here which says
dependencies you can pass these
dependencies and then your
options these two parameters it actually
take and here we can
change so this is your theme will be
changed you will see
that so you'll get these suggestions so
in this way guys you can build out this
vs code code editor if you want to
integrate this inside your angular
application so this actually supports
syntax highlighting all these themes are
available so you can see that
so and change this language let's
suppose I want to put Javascript so now
I will be able to write the JavaScript
code so same thing so in this way you
can integrate the vs code editor inside
your angular application right in the
browser itself you can allow user to
type their code in the code editor using
this nice little package which is
specifically developed for angular
applications so all the source code is
given in the description you can check
out my blog
post and also check out my website as
well guys free mediat tools.com uh which
contains thousands of tools regarding
audio video and MH and I will be seeing
you guys in the next video