#10: β New component: todo-item
We will create a new component to display each todo item presented in the list. It will be a simple component at first, but it will grow later on. What's important is that it will get the todo item as an input from its parent component. This way it can be a reusable component, and not rely directly on the application's data and state.
Create a new component called item
. You can see a new folder π src/app/item was created with the component files inside.
Use the new component in the template of AppComponent
, inside the <li>
element:
Check out the result in the browser. What do you see? Why?
@Input()
We want to display the title of each item within the todo-item
component. We need to pass the title of the current item (or the whole item) in the loop to the todo-item
component.
Again, Angular makes it really easy for us, by providing the Input
decorator.
Inside the newly generated ItemComponent
class add the line:
It tells the component to expect an input of type string and to assign it to the class member called todoItem
. Make sure that Input
is added to the import statement in the first line in the file. Now we can use it inside the ItemComponent
template and extract the item's title with interpolation: `
The component should look like this now:
The todoItem
here in square brackets is the same as declared as the component's @Input
.
We used property binding on an element we created ourselves! And now we can actually see and understand that property binding binds to an actual property of the component. Soon we'll see how this list can be dynamic.
Last updated