Up next in 10
Angular Material Step-by-Step Guide (Part 3) –Install material
2 views
Apr 23, 2025
Angular Material Step-by-Step Guide (Part 3) –Install material #angularmaterial#angulartutorial#angular
View Video Transcript
0:01
hi welcome
0:03
back in our last video we talked about
0:06
how to add the angular materializ of the
0:11
buttons now let's continue the
0:15
video back to my project here we have
0:18
add the buttons
0:20
code now let's back to
0:23
the Angular material UI library so
0:28
here if you want to add the card you can
0:30
see the simple card here you can add the
0:32
card
0:33
design the all the elements they explain
0:36
you just go through
0:40
it card header content image action all
0:44
the things I have explained over here
0:46
you can go through it the along with the
0:49
example everything here how to add the
0:51
card there the simple example over here
0:54
now if you want to add the But I want to
0:57
get this design so how to get the design
0:59
you can go here the view
1:01
code so here they have mentioned how to
1:06
add this one so let's see this one so if
1:10
you want to get this one first what you
1:12
going to do
1:13
is go to the TS i already explained get
1:17
this model which one get this
1:20
card so car you have get this one
1:25
we just copy
1:28
it back to
1:31
my app.module.ts you have to paste the
1:35
library after that math card module just
1:38
copy it
1:41
comma you have to paste it over here you
1:43
have to first you have to add the class
1:46
this class you have to implement it here
1:48
after
1:49
that second step go to the CSS file
1:53
whatever return the card about the CSS
1:55
style they are given there a predefined
1:57
style they are given from the material
1:59
UI just copy this
2:03
style back to my app component
2:07
ts app compon this this file you have to
2:11
paste it that's it after that what
2:14
you're going to do is you have to go to
2:16
the app
2:18
compon
2:20
here below the button I'm going trying
2:22
to paste a card
2:24
so for
2:27
HTML copy the clipboard here your clip
2:30
copy here otherwise you you just select
2:32
and copy simple your copy here copy
2:37
it back to my project control V to paste
2:41
it on
2:42
it I haven't get any error over here
2:46
file save
2:48
all bring back to my application
2:57
Here your card is working fine right
3:00
your card is is working fine okay here
3:03
this card is working your fine I hope
3:06
you guys you understand the things well
3:09
uh I'll see in my next lecturing hi
3:13
welcome back in our last video we talked
3:16
about how to add the card section in
3:19
your angular material design now if you
3:22
want to change the picture of the
3:25
dog right so I want to here this picture
3:28
I instead of this I'm not add this
3:30
picture of the group so how to add this
3:33
very
3:34
simple so here you can see here inside
3:39
folder now you are in the app folder you
3:43
can see here there is another folder
3:45
which is asset you can see the asset
3:48
here where we have to add the images so
3:51
select the asset folder right click new
3:55
folder you have to name it as this one
3:58
as
3:59
images images
4:02
section here this is the image I have in
4:05
my machine i go to the
4:09
folder this this image I just select
4:12
this image i just drag and drop into the
4:15
folder i just drag and drop into
4:19
the the respective folder right it will
4:23
be here so just make sure this image is
4:27
successfully
4:29
uh added into the inside the folder or
4:32
not it's successfully added here inside
4:34
the images folder we have one image
4:36
which name is one jpg right jpg which is
4:40
nothing but
4:42
a image extension right now this image
4:47
I'm going to add it so how to add it you
4:50
go to app component
4:52
html here this is src here you can see
4:55
here this is
4:57
src this
4:59
one this
5:02
src image mart image src I'm going to
5:09
Just remove this path instead of this
5:13
I'm going to add it my image so my image
5:16
is resided where asset
5:20
folder which is assets
5:23
folder make sure the name is correct or
5:26
not assets folder here
5:29
assets
5:30
slash images you type the name correctly
5:34
images slash the name of the image
5:37
what's the name you are gave one
5:40
one after that dot your extension is m
5:45
if it is a PNG you have to add it as a
5:48
PNG this is a JPG you have to add the
5:50
JPG
5:52
extension that's it now let's file save
5:56
all bring back to your browser here your
6:00
image has been changed successfully
6:02
perfect now if you want to add the text
6:05
you have to change the text as text this
6:10
text here this is this text is coming
6:13
you have to add your own text whatever
6:15
here you will be able to change here I'm
6:17
going to add the dummy you have to go to
6:18
dummy text I just added the dummy
6:22
text I just copy this
6:26
lines instead of that just copy
6:37
Copy back to here instead of that I'm
6:40
going to edit my dummy text
6:43
here file save
6:47
all now here it's added
6:50
successfully now if you want to change
6:52
the heading you'll be able to change the
6:55
heading as well here the this one is
7:00
a my
7:04
dog right here this a title you have to
7:07
change the
7:08
title right you'll be able to change
7:11
here my dog this all the things you can
7:15
you'll be able to change whatever you
7:17
needs this how we have changed
7:21
the cut of the angular material i hope
7:26
you guys you understood things well i'll
7:28
see you in my next lecture in tech