Component Templates and Styles

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