WEBVTT

00:00.560 --> 00:02.280
uh Hello friends welcome to this video

00:02.280 --> 00:04.200
so in this video I will show you how to

00:04.200 --> 00:07.319
build out a vs code editor inside your

00:07.319 --> 00:09.599
angular application where you can

00:09.599 --> 00:13.000
actually write code inside any language

00:13.000 --> 00:15.360
so you can see we actually get these

00:15.360 --> 00:17.080
automatic suggestions as well so I'm

00:17.080 --> 00:19.240
writing the PHP code so it is having

00:19.240 --> 00:21.160
this nice little syntax highlighting

00:21.160 --> 00:22.960
alongside with the line numbers as well

00:22.960 --> 00:25.800
so it supports multiple languages with

00:25.800 --> 00:27.960
multiple themes so I can change the

00:27.960 --> 00:30.800
language to JavaScript now so now what

00:30.800 --> 00:32.880
happens you will be able to write

00:32.880 --> 00:36.200
JavaScript code so right here it's a

00:36.200 --> 00:40.079
simple little editor code dat editor so

00:40.079 --> 00:42.000
there is a package here specifically

00:42.000 --> 00:43.879
built for angular applications which

00:43.879 --> 00:47.280
allows you to integrate this code editor

00:47.280 --> 00:48.719
with syntax

00:48.719 --> 00:50.800
highlighting so you can even pass

00:50.800 --> 00:54.680
multiple themes if I change it to

00:54.680 --> 01:00.000
vs so this is I think

01:00.199 --> 01:02.840
vs Black

01:02.840 --> 01:06.640
theme yeah so it actually have various

01:06.640 --> 01:10.439
themes available to us you will see

01:10.560 --> 01:13.040
that so you will see these automatic

01:13.040 --> 01:15.600
suggestions also so there is a package

01:15.600 --> 01:18.439
here uh which is there if you search on

01:18.439 --> 01:20.920
npmjs.com

01:20.920 --> 01:24.479
at theate NG stack code editor this is

01:24.479 --> 01:26.759
actually the name of the

01:26.759 --> 01:29.320
package the command is simple you

01:29.320 --> 01:32.119
install this package and it's almost

01:32.119 --> 01:34.720
having 2600 weekly downloads so I've

01:34.720 --> 01:36.720
written a step by-step blog post on my

01:36.720 --> 01:39.119
website alongside with the full example

01:39.119 --> 01:41.360
code you can go to the description to

01:41.360 --> 01:43.560
get all the source codes so the very

01:43.560 --> 01:45.240
first thing we need to do we need to go

01:45.240 --> 01:48.640
to your app. module. typescript file and

01:48.640 --> 01:50.479
just add this import

01:50.479 --> 01:54.000
statement so import code editor module

01:54.000 --> 01:55.799
which will be coming from this package

01:55.799 --> 01:58.719
at theate NG stack code editor and then

01:58.719 --> 02:01.320
you go to the import set AR and then add

02:01.320 --> 02:04.159
this code editor module. for root this

02:04.159 --> 02:06.560
is all the configuration which is needed

02:06.560 --> 02:08.640
so once you do this you come to your

02:08.640 --> 02:12.520
app. component. HTML so we declare this

02:12.520 --> 02:14.519
editor we have

02:14.519 --> 02:19.440
this directive available to us ngx code

02:19.440 --> 02:22.280
editor the opening and the closing tag

02:22.280 --> 02:24.879
so in this way you can initialize this

02:24.879 --> 02:27.160
code editor and here you need to pass

02:27.160 --> 02:29.239
some options first of all the theme

02:29.239 --> 02:32.120
options so here you can pass the theme

02:32.120 --> 02:33.840
here which is

02:33.840 --> 02:38.000
vs dark so this will make your theme as

02:38.000 --> 02:40.400
vs

02:42.319 --> 02:45.360
Star so in this way you will get all

02:45.360 --> 02:47.560
these

02:50.000 --> 02:52.239
suggestions so then we also have the

02:52.239 --> 02:55.360
option to attach a

02:55.360 --> 02:57.959
language so let's suppose now I want to

02:57.959 --> 03:00.800
Target the PHP language so I just need

03:00.800 --> 03:03.159
to pass PHP so now I will be able to

03:03.159 --> 03:05.720
write the PHP code it's that easy you

03:05.720 --> 03:07.799
can see that the syntax highlighting

03:07.799 --> 03:10.840
will be there for each language

03:10.840 --> 03:14.080
automatically so now in the typescript

03:14.080 --> 03:17.280
file if you

03:19.200 --> 03:22.440
see we

03:24.440 --> 03:27.280
can it's that easy guys you can see that

03:27.280 --> 03:30.280
so

03:32.159 --> 03:33.920
but here we do need to include some

03:33.920 --> 03:37.080
options right here first of all your

03:37.080 --> 03:39.640
dependencies and the actual options so

03:39.640 --> 03:42.360
if you do need the context menu as well

03:42.360 --> 03:44.480
you can provide these dependencies one

03:44.480 --> 03:46.599
by one such as the code editor it's the

03:46.599 --> 03:48.480
array of dependencies we are passing

03:48.480 --> 03:51.599
right here and also these options if you

03:51.599 --> 03:53.959
need the context menu then you can even

03:53.959 --> 03:56.200
provide them inside your options so

03:56.200 --> 03:59.959
context menu through mini map enabled so

03:59.959 --> 04:02.959
here you can pass these options

04:02.959 --> 04:05.319
dynamically so there is an option right

04:05.319 --> 04:08.920
here which says

04:09.000 --> 04:12.959
dependencies you can pass these

04:13.400 --> 04:17.120
dependencies and then your

04:17.680 --> 04:20.320
options these two parameters it actually

04:20.320 --> 04:24.000
take and here we can

04:27.240 --> 04:29.720
change so this is your theme will be

04:29.720 --> 04:32.560
changed you will see

04:36.160 --> 04:39.479
that so you'll get these suggestions so

04:39.479 --> 04:41.199
in this way guys you can build out this

04:41.199 --> 04:44.000
vs code code editor if you want to

04:44.000 --> 04:45.960
integrate this inside your angular

04:45.960 --> 04:48.639
application so this actually supports

04:48.639 --> 04:52.720
syntax highlighting all these themes are

04:53.160 --> 04:57.160
available so you can see that

04:57.919 --> 05:00.560
so and change this language let's

05:00.560 --> 05:03.960
suppose I want to put Javascript so now

05:03.960 --> 05:06.800
I will be able to write the JavaScript

05:06.800 --> 05:09.560
code so same thing so in this way you

05:09.560 --> 05:11.800
can integrate the vs code editor inside

05:11.800 --> 05:13.800
your angular application right in the

05:13.800 --> 05:15.919
browser itself you can allow user to

05:15.919 --> 05:18.680
type their code in the code editor using

05:18.680 --> 05:20.600
this nice little package which is

05:20.600 --> 05:22.280
specifically developed for angular

05:22.280 --> 05:25.440
applications so all the source code is

05:25.440 --> 05:26.880
given in the description you can check

05:26.880 --> 05:28.440
out my blog

05:28.440 --> 05:31.319
post and also check out my website as

05:31.319 --> 05:34.280
well guys free mediat tools.com uh which

05:34.280 --> 05:36.479
contains thousands of tools regarding

05:36.479 --> 05:39.120
audio video and MH and I will be seeing

05:39.120 --> 05:42.880
you guys in the next video