Up next in 10
Angular Material Step-by-Step Guide (Part 1) – Master UI Components!
788 views
Mar 6, 2025
Angular Material Step-by-Step Guide (Part 1) – Master UI Components! #Angular#AngularMaterial#WebDevelopment#FrontendDevelopment #JavaScript#TypeScript#UIComponents
View Video Transcript
0:00
hi welcome back in this video I'm going
0:03
to teach angular angular is a front end
0:08
framework so before install the angular
0:11
you have to install the nodejs so write
0:15
on the Google search
0:17
nodejs click on this official site this
0:20
link it go to the respective website
0:23
here you have to choose this one this a
0:24
current version here they are telling
0:26
that recommend for most user you click
0:28
on this and you download it after
0:31
download this software you have to
0:34
install it in your street drive after
0:38
install that you can test it here I I'm
0:41
not installing because I already
0:42
installed this one not so here go to the
0:47
run right click this one Windows button
0:50
right click
0:51
run here type
0:54
CM here you have to test that not
1:00
here you have write V Das V now this a
1:04
current version I have
1:06
installed this a version I have
1:08
installed you have to check it whether
1:10
the node module is in installed
1:12
successfully or not in your machine you
1:15
have to confirming this is a first thing
1:18
right if if it is if you are not showing
1:21
the version there is a problem while you
1:24
installing so here if the version is
1:26
show successfully your not modules has
1:29
been installed
1:30
successfully ination that's it that's
1:33
the thing you have to do
1:36
it I hope you guys you understood the
1:39
things well I'll see you in my next
1:43
lecture hi welcome back in our last
1:46
video we saw how to install the nodejs
1:50
so in this video I'm going to teach how
1:52
to install
1:53
the angle in your machine so first what
1:57
you're going to do is I'm going to go
2:00
to the my I have select the drive I'm
2:05
going to select F drive here I'm going
2:07
to create the folder which is
2:11
a uh
2:14
angular so I'm going to select angular
2:17
exercise
2:18
CX I'm going to create the folder right
2:20
the first time I'm going to install the
2:22
angular so this is a folder inside this
2:23
folder I'm going to maintaining all the
2:26
angular project so double click and go
2:30
inside the folder now here I'm going to
2:33
type CMD comma first right so here we
2:38
I'm going to install the my angular
2:42
project so I just close them first I'm
2:45
going to go to
2:47
the respective website for download the
2:50
angular
2:52
so go to Google and type you just simply
2:57
type
2:58
angular CLI
3:02
here the first side you can click on
3:06
this this is the official side of
3:09
angular here you can see the instruction
3:12
how to install the angular installation
3:14
angular CLI they given the command mpm
3:18
install G angular CL you just click on
3:23
the clipboard the code is copied back to
3:27
your project here here
3:30
you have to type on the address bar
3:34
CMD you have to type CMD and press enter
3:37
key your command from will be open over
3:40
here inside this folder I'm going to
3:43
install the angular C so I already copy
3:46
it just right click your command will be
3:50
paste on the uh command from look like
3:54
this mpm install G angular C right right
4:00
so if if there any spelling here if you
4:03
are leav any spaces don't leave it but
4:07
just get rid of these spaces as well now
4:10
press enter key on your keyboard you
4:12
have to wait until the installation
4:16
completed now you can see the package as
4:19
being installed successfully I'll see in
4:21
my next
4:26
lecture hi welcome back you know last
4:30
video we saw how to create the new
4:32
project of angular let's let's open them
4:35
in our vs code editor if you are not
4:39
installed vs code editor yet you go to
4:42
the respective website and download them
4:47
BS
4:48
coded
4:51
down this is the professional editor for
4:55
writing the angular application you
4:56
download them and install Mission here
4:59
you you have to select the corresponding
5:02
operating system if you are using
5:04
Windows you will be able to download
5:06
Windows if you Mac you have to download
5:08
the Mac if it is at Linux you can
5:10
download the Linux you have to download
5:13
and install machion right after install
5:17
successfully after that you have to open
5:20
up your
5:22
project here this is your project folder
5:25
double click and go inside the folder
5:28
these are the files and folders consist
5:31
of your project now I'm going to open on
5:33
V code edor go to the select the address
5:37
bar type CMD press ENT key on your
5:40
keyboard now the terminal is open now
5:43
here I'm going to open on the vs code
5:45
you type the single command code space
5:48
dot press enter key all the project has
5:51
been open on the vs code editor very
5:54
simple this how we have open the project
5:57
on the
5:58
vs thank thank you for watching I'll see
6:00
in my next
6:02
secture hi welcome back in our last
6:05
video we saw how to open the project in
6:08
our vs code editor after open your
6:11
project the folder and file structure
6:14
look like this here you can see the
6:18
package. JS this is a very important
6:21
file this is the similar to that your
6:25
springbot application that for.xml the
6:29
same thing here also we are doing the
6:31
all the dependency we are installing in
6:33
this package. JS here we no need to copy
6:38
the uh code and paste it here you have
6:41
to install them using the npm command so
6:44
that you don't worry about this it it
6:46
will be take care of it now let's close
6:50
them after that you have to go inside
6:54
the SRC
6:56
folder right so above the SRC folder you
6:59
can see the node modules folder this all
7:02
the dependen
7:04
here install dependen here you can see
7:08
see inside the node modules folder right
7:13
now the SRC folder you expand the SRC
7:17
folder now you can see there's a page
7:21
which called as
7:24
index.html what you just click on this
7:27
what is index. HTML mean react is a
7:31
single page application so react single
7:34
page application mean what's the meaning
7:36
of this this a single page which is
7:38
which will be running so the single page
7:40
will be for
7:42
calling app through it's calling the
7:45
appro
7:46
mean it will be calling the component
7:49
which component is running
7:52
first the angular is working as a
7:55
component base not a page base it's a
7:58
component base
8:00
the component base this here there is a
8:03
folder which
8:05
is right this a component so this the
8:08
every component consist of these
8:11
files TS HTML
8:14
scss TS here this is the spc. TS is a TS
8:20
these are the modules consist of the
8:22
every component so here you can see
8:25
what's the component is calling appr
8:28
when the page is loaded I want to load
8:31
app so go over here you can go to the
8:34
logic fold this is a logic
8:36
file you can see here you can see that
8:39
this is the
8:41
app it will be calling when they calling
8:44
the app it will be open up the HTML and
8:49
CSS so HTML here this is HTML page
8:52
what's our writing what is the style you
8:55
G and how the design this all the CSS SP
8:58
design so what is HTML you writing here
9:02
this all the things are
9:03
running right all things are running
9:07
here in HTML this all CSS and HTML both
9:10
are written in this same file so here
9:14
they are maintaining the separate file
9:16
also if you want to include the CSS you
9:19
have a separate file file as well right
9:22
so the first page as called as F
9:27
page that called as
9:30
yes approv so this is the page run so
9:33
now let's run the
9:35
application let's run the application so
9:38
you already open the application here
9:40
open up I'm going to run the angular
9:44
project so how to run the angular
9:46
project you type the command
9:49
NG
9:51
Ser press ENT on your keyboard now it
9:55
will be generate the port and all here
9:57
you have to uh it has uh analytics you
10:01
have to press y yes now here it will be
10:06
you have to wait the first time only it
10:08
takes some time to configure the project
10:11
after that it will be loaded first it
10:14
will be configuring your all the
10:15
projects your Bund bundle of this all
10:17
the application then it will be generate
10:19
the port you can run
10:22
it now here the port has been generated
10:25
successfully here successfully generated
10:28
now this is the URL you have to run it
10:30
so this URL you have to copy here
10:33
https slash Locos 4,200 this P there
10:39
where your angular is running so here we
10:42
are just copy contr C to copy a back to
10:45
your browser you to paste on here and
10:48
press enter key on your keyboard here
10:51
this is the welcome page of angular this
10:54
Design coming from where app component
10:58
now here the forlow is I have the short
11:00
and brief so when the index. HTML it's
11:03
calling the appro so it's it's go to the
11:06
in inside the app
11:09
folder there is
11:11
a TS file here
11:14
approv if you are calling this it will
11:17
be
11:18
running HTML and CSS CSS design we we
11:22
haven't written in your default page
11:25
this design will be
11:27
right this is this design is this this a
11:30
design they
11:32
Design This a welcome page you are
11:35
getting I hope you guys you understood
11:38
things well I'll see in my next lecture
11:40
in t