Nesting Components

Components are the course to developing an angular application. 0:00 In the previous video, we learned how to add functionality to parts of our 0:04 component by binding a function to an event, but 0:08 we need to do more with our application if we want to show off photos. 0:12 We'll be adding two new components, one for the list of posts, and one for 0:17 the post itself, let's dive in. 0:21 To start, I'm going to create a new directory inside the app directory. 0:24 It will contain all of my photo entry components. 0:29 So I'm going to call it Entries. 0:34 Angular style guide suggests keeping like components in a parent folder. 0:39 For this application it means that all of our components that's specific to entries 0:43 will be located in the entries directory. 0:49 You can find the link to the style guide in the teacher's notes. 0:51 I'll now add the entry Directory and the entry list directory. 0:54 In the entry list directory I'll create three component files. 1:06 Entry list.components .cs. 1:15 Entry-list.component.html and 1:29 entry-list.component.css. 1:38 Be sure to create all of these files 1:46 even if you don't intend on using the stylesheet for this component. 1:50 You'll be doing yourself a favor when the time comes when you do want to use it. 1:54 In the entry list component.ts file, let's create the base component. 1:59 First, you need to import the component decorator from the angular core. 2:04 Then we'll add the component class. 2:22 Make sure it's exported so we can import it later, 2:31 then add the component decorator. 2:35 When giving your component a selector, be sure to use all lowercase characters. 2:47 And the words are separated with a hyphen. 2:58 This is known as kebab case. 3:05 It's consistent with html specification. 3:07 Angular style guide has more information on naming a selector. 3:10 This selector is what we'll be using in our app component's template. 3:13 Let's add the templateUrl. 3:18 Then the styleUrls. 3:29 Set to an array containing the new recreated stylesheet. 3:34 Next we need to tell Angular about our new component. 3:44 We do this by opening up the app.module.ts and imported the component. 3:50 Then, adding it to the module's declarations property 4:15 Throughout this course, we'll be adding more components. 4:28 I don't really want to continue adding lines to the app.module.ts file for 4:31 every new component we create. 4:36 Instead I'm going to create what in @angular is called a barrel. 4:38 A barrel is a single file that re-exports all components and services for 4:42 a feature, it doesn't serve any other purpose than that. 4:47 So in the entry's directory, I'll create a new file called index.ts. 4:50 In this file I want a line to export everything from the entry list component. 4:59 Then at the app modules ts file, I'll change the previous 5:17 import statement to be the entry's directory. 5:23 Now whenever I add a new component to the entry's directory, 5:37 I can access it on this one import. 5:42 You can find out more information about barrels in the teacher's notes. 5:45 Now, that our entry list component is being referenced in the NG module, 5:49 we can start using it throughout our application. 5:53 Let's go back to our app.component.html file and mess things up. 5:56 We can start by replacing the H2 that we worked so hard on before with a new tag. 6:01 We want to add our entry list here. 6:07 I'll add the app-entry-list custom element to the page. 6:10 This is where Angular's compiler is going to check that it has a reference to our 6:14 component. 6:18 Let's look in the browser to see what's going on. 6:19 An empty pitch. 6:22 Just what I'd expect since we haven't added 6:23 any content to our entry list template. 6:26 Let's quickly demonstrate what happens when you try and 6:28 reference a selector Angular doesn't know about. 6:30 I'll change up app-entry-list with foo. 6:33 And we'll see what happens. 6:37 The app failed to load and the console is red. 6:41 There's one line that says foo is not a known element. 6:45 It tells me how I can go about fixing the issue. 6:49 This is super helpful information when something really goes wrong. 6:51 But in our case, everything is fine. 6:55 I'll change the foo tag back to app-entry-list. 6:57 I'll double check, and the browser's happy again, cool, great. 7:02 Now, if we take what we learned from the entry-list component, 7:06 we'll need to do the same for the entry component. 7:09 So in the entry directory, 7:12 let's create the three files, 7:16 entry.component.ts. 7:21 Then entry.component.html. 7:26 Then entry.component.css. 7:32 To create this component, I'm going to just copy the contents of the entry list. 7:40 And paste it into the EntryComponent.ts file. 7:49 Then I need to change the name of the component to 7:54 EntryComponent And adjust the selector 7:57 the template URL, and these styles. 8:06 Save the file. 8:11 Then to re-export the component in the barrel, 8:15 I'll re-open the index.ts file in the entry's folder. 8:18 And then add the export line. 8:22 Finally I'll reference the new component in the app.module.ts file. 8:27 Because we're using a barrel, and I did not need to add a new line. 8:40 All I needed to do was include entry component 8:43 in the import list from the entry's directory. 8:46 Then Add a reference to the declarations property so 8:52 Angularjs can use the new component. 8:55 Something to note here. 8:57 I placed entry component above entry list component in the declarations array. 8:59 Angulars compiler reads through each of the components templates looking for 9:05 the element. 9:09 It doesn't recognize. 9:10 Have the compiler reach the entrylist component first, and 9:11 entry component hadn't been processed by the compiler, 9:16 we'd see an error in the console and the app wouldn't work. 9:19 Always put your child components first. 9:22 Now let's make sure that we can see both components in the browser. 9:25 In the entrylist.component.html I'll add a friendly message. 9:29 Hello from entry-list.component.html. 9:33 I'll also add the app-entry element, so 9:42 I can verify that the entry component is being loaded. 9:46 Now if I jump on over to the entry.component.HTML. 9:53 Lets add a friendly message in there, hello from entry.component.HTML. 9:58 Save the file and we get to the browser and I see. 10:06 Both messages are there. 10:13 It's working. 10:15 Great. 10:16 We're really moving along now. 10:17 Keep up the great work. 10:19 In the next video we'll build up the basic HTML and CSS for entry. 10:21 I hope you're as excited as I am. 10:26