Up next in 10
Angular Material Step-by-Step Guide (Part 2) – Master UI Components!
587 views
Mar 6, 2025
Angular Material Step-by-Step Guide (Part 2) – Master UI Components! #Angular#AngularMaterial#WebDevelopment#FrontendDevelopment #JavaScript#TypeScript#UIComponents
View Video Transcript
0:01
hi welcome back in our last video we saw
0:04
how to run the angular application now
0:07
let's back to our
0:08
project now here I already explained
0:11
this all the things here inside this our
0:15
SRC folder there is a app folder the app
0:19
folder we have a HTML and CSS this is a
0:24
TS
0:25
I now if you go to there app. comp. HTML
0:31
this design here this all the design
0:34
will be written by angular here app.
0:38
compound. HTML you can see here now what
0:42
you're going to do is I'm going to all
0:44
the design here control+ A on your
0:48
keyboard press delete key on your
0:51
keyboard now I'm going to type it here
0:55
H1
0:58
tag here I'm going to type it as
1:03
hello now let's file save
1:07
all bring back to the application and
1:11
check you can see here here allo has
1:15
been display
1:17
successful hello has spin display
1:19
success you can see this this how here
1:21
angular Works how the flow work here is
1:24
you can see
1:26
here now here you can see here index.
1:29
HTML you call it here
1:32
appro if you call appro it goes to Here
1:36
app component.ts here you have select as
1:40
approv it selected
1:42
here approv this approv this
1:45
approv this this appr this appr consist
1:49
of what is a HTML you
1:52
written what HTML WR WR hello it has
1:55
been
1:56
displ in CSS you haven't written
1:59
anything else if you have written
2:01
anything any style you have
2:03
written it will be display along with
2:05
the
2:06
Styles
2:08
perfect it will be display on your
2:10
browser Perfect all has been displayed
2:13
successfully
2:15
now here I'm going
2:20
to put one
2:24
paragraph some D text I'm going to get
2:27
some text to here
2:34
dummy
2:40
text I'm going to copy some dummy
2:44
text I can see here I'm going to paste
2:49
it right now let's file save
2:53
all back to the application it's working
2:58
well I hope you guys you understood
3:00
things well I'll see in my next video
3:03
lecture thank
3:05
you hi welcome back in our last video we
3:10
saw how to display the heading and
3:14
paragraph let's continue the video now
3:18
here I'm going to add the CSS style in
3:22
this
3:23
page so CSS CSS style in order to add
3:27
the CSS Style
3:30
in angular we have a separate page which
3:32
is a app. compon do SCS this is the
3:37
advanced version of CSS so here I'm
3:40
going
3:41
to add one style so you have to write
3:44
the class dot you write the text I just
3:48
create as a red text I just uh create as
3:52
a red
3:53
text WR red text open and close bracket
3:57
here I'm going to write the color
4:02
color red I just add as red
4:07
color I'm I'm going to add it as red
4:11
color so this one this sty I'm going to
4:13
call it into my
4:15
paragraph so we have to add here as dot
4:18
so we have to use it as a class so write
4:22
paragraph space class you write the what
4:26
is the name you gave here the same name
4:29
you have to give here
4:30
so you right
4:33
red
4:36
text now let's file save
4:40
all bring back to the application here
4:43
it will be changed now let's change the
4:47
color so if you want to change the color
4:49
I'm going to here instead of the red you
4:52
can change it as a blue you have to give
4:55
here as a blue you can see here the
4:57
property you can see as a blue whatever
4:59
color you you can
5:01
select so here again file and save all
5:05
now the color has been changed as a
5:08
blue this how we have simply apply
5:12
the CSS typ so if you want to change
5:16
header color so I'm going to I'm going
5:20
to change as
5:21
at
5:23
header
5:27
color open and close K bracket
5:30
here I'm going to change the
5:33
color navy
5:35
blue so navy blue navy here the name
5:38
this one you change name thisor I'm
5:40
going change
5:42
name file save all bring back to the
5:49
application so here why it's not F has
5:53
been
5:54
change why the problem is here we
5:57
haven't had the style so
6:00
right
6:03
class
6:06
header color this is style you have
6:10
here what is the name you given here you
6:13
have to give the same name over
6:16
here if you write the style you must
6:19
call it then only it will be work
6:21
otherwise it won't
6:23
work I save all I can bring back to the
6:25
application now here it has been changed
6:28
as a Navy
6:31
perfect I hope you guys you understood
6:33
the things well I'll see in my next
6:35
lecture
6:37
T hi welcome back in our last video we
6:41
talk about the uh how to add the CSS
6:44
style in our HTML page in this video I'm
6:48
going to teach about the angular Mater
6:51
material design so let's back to
6:55
my browser go to the Google search
7:00
here type angular material
7:04
UI here you have a all the material UI
7:08
design is consist of this page click on
7:12
this here you can see here get
7:17
started here they given the instruction
7:20
how to install the angular material so
7:23
here NG add at angular material you just
7:28
copy on this
7:30
select and
7:31
copy so back to my projects my projects
7:34
I project this my project angular here
7:38
my already my one terminal my project is
7:41
running so here I'm going to get another
7:44
terminal you have type
7:46
CMD open the terminal okay inside this
7:50
projects okay so don't go to outside uh
7:54
here you you don't open go inside the
7:56
project and open the command front
7:59
right I open it here you can see this
8:01
open it now here I'm going to paste the
8:03
code whatever code I copied from the
8:07
material UI
8:10
website right so here it will be the
8:13
package is installing so you have to
8:16
White it's configuring and installing so
8:19
it will be asking to the installation
8:22
you
8:23
proceed type as yes why press enter key
8:26
on your keyboard you have to wait until
8:28
the all the material libraries packages
8:31
get
8:35
install now here it t to choose the
8:38
theme I'm going to select the default
8:41
theme as Indico
8:43
pink press ENT key on your keyboard you
8:46
click yes you have select this one press
8:49
enter key on your keyboard you have to
8:51
yes
8:53
type typography Styles yes press ENT key
8:57
on your keyboard
8:59
now it ask include and enable the
9:02
animation also I'm going to enable it so
9:04
select
9:06
it press enter key on your
9:10
keyboard select and Enter key on your
9:14
keyboard now you have to wait until all
9:17
the package is installed so here all
9:20
things are installation successful your
9:22
materialized uh library has been
9:25
installed successfully you can get this
9:28
message right now let's back to our
9:33
project now you can see here package.
9:37
JSM you can see that the package Jo the
9:40
here angular material it has been
9:44
successfully added here if you add the
9:47
new dependencies you can have you can
9:49
see here all things will be added here
9:52
you can check it here packet.
9:55
JS this in this all the library has been
9:59
inst here I hope you guys you understood
10:02
the things well I'll see you in my next
10:03
lection thank
10:06
you hi welcome back in our last video we
10:11
saw how to install the angular material
10:15
UI let's continue the
10:17
video now let's back to my angular
10:21
material uh website so here you can see
10:28
there is a component if you have to go
10:31
to the angular material here you can see
10:33
here if you want to go to again you can
10:36
go here angular material
10:39
UI click on
10:42
here here you will be redirect to this
10:45
page here this home page you can see the
10:48
component button you click on this if
10:51
you click the
10:52
components uh here this all the style
10:55
should be there here if you want to add
10:56
the buttons if you click on the button
10:58
here the button styles are there the
11:00
material design you can see all the
11:02
material design of the buttons If you
11:04
have the card you can see the card
11:09
checkbox this is the styles of the
11:11
checkbox so everything is there if a
11:14
field form form field here these are the
11:18
form field implementation all the things
11:21
are there now first let me test that of
11:24
the bottom how the bottom style should
11:27
be appear appearing on the page click on
11:30
a
11:31
button so it's a bon
11:34
Styles so butt style you can see the
11:38
overview API and examples the examples
11:42
also there now let's go to the
11:47
overview let's
11:49
here I want to get the second one this
11:52
code of the button you can click here
11:55
view Cod click on
11:57
here so the I'm not the first section
12:01
first section mean this first section
12:02
you can see the first section mean here
12:04
this
12:07
one the first section I want to get the
12:10
second section of this one I need a
12:13
section of the Buton so
12:16
the this is second section you have to
12:18
get it so first if you just copy and
12:22
paste it it won't
12:25
work what you what you have to do it
12:27
first you have to go to
12:30
the
12:31
TS the TS file this is the class where
12:37
the material button is resided this is
12:40
the class where your material design is
12:43
resided so we have to import the class
12:45
first so you just copy the path of the
12:49
class over here just contr C to
12:52
copy go to your
12:55
project app module. TS here this file
13:00
here we are here here are importance
13:04
here all the parts here whatever you are
13:07
implemented here you can see here here
13:09
you have to paste it if you past it you
13:12
can see here you have to add the path
13:14
over here where your ma but button
13:17
module resided you can he angular
13:20
material and
13:21
button you already installed the
13:23
material Library so you have to give the
13:25
path where your button is resided so
13:28
this but Buton module you have to import
13:30
it here you just copy it here comma and
13:36
paste it here that's the thing you have
13:38
to write so here you have to give the
13:40
path where your button is resided after
13:43
that you have to implemented into this
13:47
section import section you implemented
13:49
if you implemented here you can get this
13:54
button into
13:55
the app component. HTML this page you
13:58
can and get the style of the button
14:02
right after that what you're going to do
14:04
is you have to go to your CSS file as
14:07
well here this is the styles of the
14:10
buttons all the Styles I just copy all
14:13
the Styles over here you just click the
14:16
clipboard and copy this all the
14:19
Styles this
14:21
one we have a
14:24
separate file which is a CSS main file
14:27
you just paste it paste on that this
14:30
what is the sty you are
14:31
copied right that's it after that you go
14:34
to the HTML file this one we already
14:38
studied we just remove it so back to
14:44
my
14:45
uh back to my example so I'm going to
14:49
get into this one so you can get it here
14:52
this button Style I want to apply to my
14:54
project so I'm going to copy from this
14:57
VI to from this to this this TV started
15:01
and close it here just copy it back to
15:04
my project and paste
15:05
it right now here we haven't get any
15:08
error we already import the in order to
15:11
add this button first you have to import
15:14
the class where that button is resided
15:18
after that you have do the
15:20
implementation after that that button
15:23
CSS style we have to added after that
15:26
you have to add the HT then only it will
15:28
be working now let's file save
15:31
all back to my
15:34
browser here it's working here the
15:37
button style is working successfully now
15:41
unfortunately sometime the F the style
15:44
is not working don't worry about that
15:47
that is one troubleshooting you have to
15:49
do it here your angular project is
15:50
running so some other caching problem is
15:54
not working so press control key on your
15:57
key Control Plus C on your
16:00
keyboard you have to stop the project
16:03
and you have to rerun the project again
16:05
you have to use the command NG serve and
16:08
press enter key now here all the cash
16:10
has been clear and rerun your project
16:13
the problem will be
16:17
solve right I hope you guys you things
16:21
well I'll see you in my next lectur
16:23
thank you