Pass Data to Components with Inputs

Instructor: [0:00] We've got a simple habit list component here with some sample data that's just hard-coded into the component. We have an unordered list with a list item where we're using ngFor to loop over that array of habits.

[0:17] If I open the browser to the side, you can see that the habit tracker, which comes from our app component. Then we have the habits, which is this h2 tag here with our list of habits.

[0:30] What we'd like to do though is extract out this list item as its own component so that if we need to add any functionality, styling, or anything like that, we can do all of that in a different component instead of growing this habit list component. Just keeps our components lightweight and small.

[0:48] To do that, let's first create a new component using the Angular CLI. I'm going to stop our developer server and clear it out and make this a little bit bigger for us. I'm just going to say, "ng g," for generate, "c," for component. Let's call this habitItem and run that.

[1:06] I have some settings in my angular.json file to only generate a single file component. Let's go ahead and close the terminal and open up the file explorer. You can see now we have habitItem.component. This component has also been added to the app module in both the imports and the declarations array. It is ready to use.

[1:32] If we close that and look at our habitItem, you can see that we just have a standard boilerplate template here. Let's go ahead and delete that. What we'll do is we'll cut the list item from the list component and then drop it into the item component.

[1:49] This isn't quite right because we don't want to loop over the habits here. We're going to cut that out. What we need to do is somehow pass each habit down into the habitItem component. How do we do that?

[2:01] Back in the habitList component, what we'll do is instead of the list item, we'll just select our habitItem component. We're going to put our ngFor there so that as we repeat each item, we're going to display another app habitItem component. I'll say, "Let habit of habits."

[2:24] Now we're looping each of these. Let's go ahead and just add a piece of text here just so we can see that this is working. If I run the server -- let's just open the browser to the side and refresh the page -- you can now see that we have one hello for each habit.

[2:44] How do we actually get the habit information to display? We need an input for this. Let's go back to the code. We can just hide the terminal and hide the file explorer. What we need to do is pass a habit into this list item. To do that, we're going to need what's called an input.

[3:03] We can define an input by first defining a class property. We'll call it habit. We're not going to use any types here, just because we're just trying to get to the basics of Angular. In order to specify that this is an input, Angular has something called a decorator.

[3:18] I can import this thing called input. My editor will pull it from the Angular core package. It is a function. You need those parentheses. This just tells Angular, "Hey, Angular. Look for an input of habit."

[3:34] Go back over to habitList. Inside of here, we're going to write, "habit" and parse in our habit, but we need to do one extra thing. We need to surround habit with brackets to tell Angular that this is an input.

[3:51] Lastly, now that we have our habit being parsed in, we can just use the habit. We'll just surround hello with curly braces here and just say, "habit.title." Now let's open the browser to the side and refresh the page. Now you can see that we have our habits that are working correctly.

[4:09] Just one more thing before we go. In documentation and examples, you will most likely see the input on the same line as the actual class property. Just a heads-up that this on one line is the same as having the decorator above it on a second line. That is how you use inputs with components in Angular.