Up next in 10
Angular Material Step-by-Step Guide (Part 4) –Components
1 views
Apr 23, 2025
Angular Material Step-by-Step Guide (Part 4) –Components #angularmaterial#angulartutorial#angular
View Video Transcript
0:00
hi welcome back in our last video we
0:04
talked about the card section the before
0:07
video we talked about the button the
0:08
same thing you have to apply in another
0:11
fields here you can see the form fields
0:14
you can study the same thing what I did
0:16
here the same thing you just go to the
0:19
view codes the same thing you have to do
0:22
it here the form field has the same
0:25
thing you have to do it right so this is
0:28
this how we have to do the
0:29
implementation part of the components of
0:32
the angular material UI uh now I'm going
0:36
to start the simple project of how to
0:40
add two numbers of angular material UI
0:44
so I'm going to what you going to do is
0:46
instead of doing the uh example in this
0:51
project I'm going to create the new
0:54
project of angular so first what I'm
0:58
going to do is I'm going to I'm going to
1:00
go to
1:02
my project this is a project folder this
1:04
a project folder i'm going to create a
1:06
new one so I'm going to go to
1:10
my Google and type
1:13
angular
1:16
install angular uh CLA type angular CLA
1:22
click on
1:24
this this is the installation part copy
1:28
the copy the
1:31
dashboard you have to go here you have
1:34
to type
1:36
cmd paste it here press enter key you
1:39
have to wait until the project
1:42
configuration
1:45
successfully right now here it will be
1:48
configured successfully now I'm going to
1:49
create a new project of angular if you
1:52
have previous project any project
1:54
running on angular you have to close
1:57
them you have to close them I already
1:59
closed it right
2:02
now what I'm going to do is I'm going to
2:05
create the new project of angular so
2:08
here this is the command where we have
2:09
create a new project just copy
2:12
it I already I explained this how we
2:15
have create the new project ng new my
2:18
first project you just copied and paste
2:21
it over
2:22
Here I'm going to give the name of the
2:25
project so I'm going to give the
2:29
name add two numbers
2:34
add numbers i just add numbers this is
2:37
my project name i
2:39
have
2:40
numbers right this is the name of my
2:43
project my add
2:45
numbers press enter key on your keyboard
2:49
you have you have to ask would you like
2:52
to add the angular routing yes press
2:54
enter key here you have to select the
2:58
SCSS help of your up and down arrow set
3:03
down arrow and press enter key on your
3:05
keyboard but you have to wait until all
3:08
the angular packages get
3:11
installed now the project is created
3:13
successfully you can see here now I'm
3:15
going to open the project so you have to
3:18
type which one you have to go this one
3:21
this is your newly created project you
3:23
can see here my add numbers double click
3:28
and go inside the project here I'm going
3:30
to open the new
3:32
terminal
3:34
cmd to open the new terminal I'm going
3:37
to open this project on my VS code
3:38
editor you have to type code space
3:43
dot that's it i hope you guys you
3:47
understood the things how to create the
3:49
new project and how to open up the VS
3:52
code editor i'll see in my next
3:54
lecturing thank
3:56
you hi welcome back in our last video we
4:00
have created the project in this video
4:03
in this project I'm going to install the
4:06
angular material UI so I already taught
4:09
how to install them go to the respective
4:13
website so go to the respective website
4:16
which is a angular material
4:19
UI click on
4:23
this get
4:25
started here this is the code you have
4:27
just copy
4:29
it back to my project is a
4:33
project this project I already open over
4:36
here this
4:37
open now here paste it make sure you
4:40
have to paste it inside here f angular
4:44
Okay Angular ex this is my folder inside
4:47
the folder we have a project right so
4:50
you have to make sure the directory is
4:51
correct or not here my add numbers you
4:55
have to paste this press enter key on
4:58
your keyboard you have to wait until the
5:00
here
5:03
yes right it will be installing you have
5:05
to wait until the right you have to
5:09
proceed yes
5:14
you have to wait until the packages get
5:17
installed now here it ask for the team
5:20
so I'm going to default you have to
5:22
select the indic you have to select the
5:24
you have to click on here you have to
5:26
select the help of your up and down
5:28
arrow i would select as default one
5:31
indic indicopy press enter key on your
5:34
keyboard uh and here styles so here yes
5:39
press enter key on your keyboard include
5:41
the enable animation press enter key on
5:43
your keyboard right you have to wait
5:45
until the package is installed it will
5:47
be installing successfully right perfect
5:50
we have to added the angular material
5:52
design your project
5:54
successfully uh I'll see in my next
5:59
lecturing hi welcome back in our last
6:02
video we installed the angular material
6:05
UI design successfully let's open my
6:09
project this is my new project for my
6:11
old project i just close it we don't
6:13
need them this one so here this src
6:16
folder inside the src folder we have a
6:19
app folder you can see the app folder
6:21
now what you're going to do is I'm going
6:25
to go to create the new
6:29
component right so I'm going to create
6:31
the new component the angular working as
6:33
a component module so this app is a main
6:36
component i'm going to create the
6:38
another component so how to create
6:40
another component go to
6:43
my terminal window this is terminal
6:46
window so here you have to type the
6:49
command
6:52
ng g mean generate you can type g
6:56
generate c mean component okay ng
7:00
generate a new component so ng component
7:04
you have
7:05
to add the component name over here i'm
7:09
going to add the component name as add
7:11
numbers this is the component I'm going
7:12
to create add
7:15
numbers this is a new component i'm
7:17
going to create it this this how we have
7:19
created the components you can create
7:20
component whatever name you want i have
7:23
created the component as a add numbers
7:26
you can create the component like a
7:28
customer employee staff whatever name i
7:32
just create as
7:33
add key on your keyboard now you can see
7:37
here now you can see here the component
7:39
is created these four files here the
7:41
same
7:42
thing this is the default component when
7:45
you generate the project in the app
7:46
component you can see the HTML
7:49
CSS TS here this one SP CSTS and TS the
7:53
same thing the newly created component
7:55
has the same files are HTML CSS here
7:59
these four file has been generated
8:01
successfully right so you can see here
8:06
now here if you expand the folder you
8:09
have additionally the new folder has
8:11
been created which is
8:13
a add numbers this folder consist of
8:17
these files these four files is consist
8:21
HTML
8:24
CSST and TS okay this one we don't need
8:27
them these three files are important ts
8:31
SCSH right
8:34
perfect now what you're going to do
8:37
is I'm going
8:40
to here now I'm going to run the my
8:43
project here you can see
8:46
here I'm going to run my Angular project
8:50
how to run the my Angular project
8:52
ng
8:54
so press enter key on your keyboard
9:03
right your angular project is
9:05
successfully uh here you can see the uh
9:09
port is generated successfully you just
9:10
copy this
9:12
URL to your new project i'm going to
9:16
paste it press enter key this is the
9:18
welcome page of Angular now you can see
9:21
already I have discussed about this one
9:23
now what you're going to do is this is
9:25
my new
9:26
component now this component I have to
9:28
call inside this here your app component
9:32
this file so I'm going
9:35
to control a control + a on your
9:38
keyboard select all press delete key on
9:40
your
9:40
keyboard here I'm going to call into
9:43
when the page is loaded i want to load
9:46
it in my first comp this component which
9:50
component add numbers this component
9:52
have to load this what is uh what the
9:56
design you have written in the HTML this
9:59
one loaded so how to do
10:01
this go to the selector which is here
10:05
you can see here
10:07
uh the
10:09
flow you can go to how the flow is
10:12
working i already show index
10:16
html it's calling the app root so it's
10:19
go to it's go to the app
10:23
component ts file it will be taken the
10:27
appro it's taking the approach whatever
10:29
written in the HTML and CSS it will be
10:31
done the same thing here as well you
10:34
have to go to if you want to call the
10:37
add numbers component you go to the TS
10:40
file of the add numbers component this
10:42
is the TS file just select this you
10:45
selected you just copy it C copy
10:48
back to your app component html file you
10:52
have to paste paste on
10:54
that paste on
10:57
that right now this one here if you
11:01
paste on it what happen
11:03
is here written this here default it
11:07
will be the paragraph that return and
11:10
numbers works this text has been working
11:14
now let's
11:15
file se
11:18
all back to my application check here
11:21
add numbers it's
11:24
working right very simple okay you have
11:27
to call it this component inside
11:29
here this how we have do the project I
11:32
hope you guys you understood things well
11:35
I'll see you in my next section
#Computers & Electronics