Building Awesomer Apps with Angular Challenge 6: Solution
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Challenge 6: Solution" Lesson
>> Lukas Ruebbelke: So, I'm going to just walk through this. For the sake of time I'm going to use the CLI. But let's go ahead and create a review component.
>> Lukas Ruebbelke: So, ng c, or g c, let me just zoom this up just a bit. I tried to adjust the font in this, in the web zone, it's a little hard.
[00:00:30] So ng g c reviews -m because we have multiple module in the root. So this is just by having the angular module, angular material module, etc. We just need to do this, so app.module.ts.
>> Lukas Ruebbelke: And let me just zoom this back down a little bit, and so you can see that it created a css file, an html file, a spec and then the component class in type script.
[00:01:02] Is well, is it is updated the app module. So I'm gonna walk through what actually happened there. So if we look in our app directory, we should have a reviews folder with some CSS, some HTML, spec, and in an empty component. So I'll close everything down but this for right now, actually let me do, close down the spec and the css file.
>> Lukas Ruebbelke: So let's go here and we'll go,
>> Lukas Ruebbelke: is the heat. And had we not used the CLI, so they just really kinda streamline some stuff. We would need to go in and add this to declaration. So if you're doing something by hand, just make sure that you add this to the declaration.
[00:01:58] So I'm gonna just delete this, so we can kinda see what this looks like with, assume that I did this by hand. So just type in a declarations, reviews, component, imports it, you're good to go. So now we need to add this to the tom via the selector.
[00:02:19] So in to the home we want a template, this is kind of our landing place de jour for these kind of things. And because it is a reviews component, we can ascertain that the selector for this is app-reviews. Like so and I'm going to just put a horizontal rule.
[00:02:45] And let's see if this renders. Yay! Okay, so far so good? Everybody following along? Now let's go ahead and
>> Lukas Ruebbelke: okay so The CLI command, Peter, is as follows. ng g, for generate, c, for component, so this is super shorthand, reviews, and then because we have multiple modules in the root directory, we have to specify what module we want it to load in, which is app module.ts.
[00:03:29] And so that is the command that I typed, so ng g for generate, c for component, reviews so that's the name of the component, -m as in put it in this module, app.module.ts. Thanks Mat G hashtag homie.
>> Speaker 2: I've got a question.
>> Lukas Ruebbelke: Yes.
>> Speaker 2: When I try using that command from my command line, given like you have to be inside the angular, in order use the command.
>> Lukas Ruebbelke: What is your current working directory? Anger dash rest dash ep,
>> Speaker 2: So you're in the folder
>> Lukas Ruebbelke: yup Let me see here, so I'll look at that in a moment, because it should be working, because you should be in there. I'll take a look, that's odd, so we'll check that out.
>> Speaker 3: I had that issue yesterday.
>> Lukas Ruebbelke: You're on a Mac too. We'll look at that. That seems like something's kind of jumping tracks there. So we have this in our view, the Selector, right here. Let's go ahead and add this to the route. So if we go to app routing module.
[00:04:49] I'm just going to duplicate this. We'll go reviews, and reviews component, that's all there is to that. Let's just double check this. Add so now when we go /reviews, It's gonna match that path and load the component into the router outlet. Now let's just take this a step further, and just so we can get into the sidebar, we'll go reviews.
[00:05:24] We'll stay with this icon I suppose, here. And what this does is then, it loops over and essentially adds a nav bar link, for every item in the collection. So we can just add this to the side bar, so if you go here, you'll see that we have reviews.
[00:05:41] So we can click over to items, and back to reviews, so this is just an easy way to navigate to this. Now to finish this challenge off, let's go ahead and add in a few properties that we can bind to, so we'll go title frontend is the heat.
>> Lukas Ruebbelke: And we'll go ratings.
>> Lukas Ruebbelke: Five, four, five, five, three, someone didn't like my jokes, someone else did. So we now have a title and a ratings. If we go into our template now, we can go ahead and bind to the title using double curly braces. And do another horizontal rule to separate things.
[00:06:40] And we'll go, I don't know, use just a /p tag, I suppose, NgFor,
>> Lukas Ruebbelke: Let rating of ratings,
>> Lukas Ruebbelke: We'll just bind to this.
>> Lukas Ruebbelke: And let's see what this looks like, as we expected. So you could do this even as a list, list items, whatever. The point is, we're just taking the collection and looping over it.