This course will be retired on April 12, 2021.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we'll add some HTML and CSS to our component.
Welcome back.
0:00
In the last video we built up
the scaffolding for two components.
0:01
In this video we'll introduce
some HTML structure and styling.
0:05
What you'll notice is just how little
the framework gets in the way of
0:09
semantic markup and styles.
0:13
Letting designers have total control
of each components look and feel.
0:15
Let's get going.
0:19
We're picking right up where
we left off in the last video.
0:20
I've got the entry component.html open.
0:25
And before I start writing any html
markup, I'm going to enter the different
0:28
properties I'm going to
expect to have in my entry.
0:33
Let's delete this message from the file.
0:37
And each entry will have a title,
0:39
a photo, a description, and comments.
0:44
I'm gonna leave comments off for now.
0:50
We'll be tackling the comments
later on in the course.
0:53
Now I'll add curly braces
around each property.
0:56
These values will come
from the component class.
1:05
If we look at the browser,
we'll see that the message for
1:08
the entry list component is there but
nothing from the entry component.
1:11
Okay, so we've added the properties
to the entry component
1:15
template now let's add them to
the entry component itself.
1:19
Each property will be a string.
1:31
So I've set the type accordingly.
1:36
Since we don't have this
wired up to a server,
1:41
I'm going to assign some initial values.
1:43
Let's set the title to My First Photo.
1:46
The photo to be the URL
1:53
http://placehold.it/800x500 with
1:57
the query string of text=Angular Basics.
2:05
And then for the description,
'A Description
2:13
of My First Photo'.
2:21
We'll change these later.
2:25
This will give you something
to look at in the browser.
2:26
Save the file.
2:29
And now the values are showing
up in the browser.
2:32
I am going to remove the message from
the entry list component the html file.
2:37
So I'm gonna open up
entry-list.component.html,
2:45
delete the first line and save it.
2:49
And back in the browser, we just have
the values from our entry component.
2:53
Let's start to write out our HTML.
3:04
In the entry.componnet.html file
let's wrap the title in an h2 tag.
3:06
Then save it.
3:18
The browser shows the change.
3:22
I want the image and the description
to be wrapped in a figure element.
3:25
This is standard HTML so
nothing special here.
3:36
The photo should be a property
3:39
that will go on the source
attribute of an image tag.
3:43
Just like if you're writing regular html,
3:50
be sure to put quotes around
the photo in the curly braces.
3:52
Then I'll rub the description
in a figure caption.
3:58
Save it.
4:08
The browser shows our
entry without any style.
4:10
So let's fix that.
4:14
Open up the entry component.css file.
4:18
The figure element by default has
a margin of 40 pixels around it.
4:21
I want to remove it.
4:26
So let's set it to 0.
4:29
And then add a 1px border around it.
4:31
If we switch over to the browser, we can
see that our new styles have been applied.
4:43
Let's inspect that.
4:48
I'm going to use Chrome Developer
tools to see the CSS.
4:49
If I right click on the element and
click on the Inspect element
4:52
I can see the style rules that
are applied to this element.
4:56
You'll notice that the figure style has
an extra identifier on the selector
4:59
This is how angular scopes the style
to that particular component.
5:07
If we look at the HTML tag for
figure we'll see the same identifier as
5:11
an attribute of the element Now let's
add some more rules to our style sheet.
5:16
I want the caption to overlay the photo.
5:23
So I'll give it a transparent
5:27
background, And white text.
5:32
Bump up the font size Add some padding.
5:49
Position it at the bottom
of the parent element.
6:04
Next, I need to make the figure
to have a relative position,
6:21
so that the caption will
be properly positioned.
6:24
Then I need to adjust the photo so
it fits in the figure element.
6:33
I'm going to make it fluid, so that the
width will be 100% of the parent element.
6:54
Remember, that because we're adding these
styles to the component's style sheet
7:14
these changes won't have any effect on
other components in our app which is
7:19
a very nice feature.
7:23
Looking at the browser we can see that the
changes that took effect make our figure
7:25
100% flexible.
7:30
One more thing I want to do is add
a margin to the outer app entry element.
7:31
To do this we'll use the host,
Pseudo class.
7:36
If you're not familiar with the host
pseudo class it's part of the CSS3
7:45
specification for
scoping to the shadow dome.
7:50
I've included some information on the host
pseudo class in the teacher's notes.
7:53
I'm going to add the padding of
1em to each app entry element.
7:57
Because the app entry
element is a custom element,
8:02
the browser treats it
as an inline element.
8:05
Which means we cannot
simply add padding to it.
8:08
We need to set it as
a block level element.
8:11
Great, our browser shows the entry and
the styles are looking great.
8:17
The ability to scope your style
sheet to a single component
8:22
is one of Angular's best features.
8:26
Having a place where the content creators
and the designers can make changes without
8:28
touching core business logic is a must for
any team.
8:33
In the next video,
we'll learn about directives and
8:37
how to control the page layout.
8:40
You need to sign up for Treehouse in order to download course files.
Sign up