#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.

In the terminal, create a new component called todo-item:

ng g c todo-item

StackBlitz Instructions

Use the Angular Generator to create the component, then make the component use an inline template. Continue with the remaining instructions on this page.

Back in your IDE, you can see a new folder was created - src/app/todo-item, with the component files inside.

Use the new component in the template of app-root component - inside the <li> element:

src/app/app.component.ts

<ul>
  @for(let todoItem of todoList; track todoItem.title) {
    <li>
      <app-todo-item></app-todo-item>
    </li>
  }
</ul>

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 current 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 TodoItemComponent class in todo-item.component.ts add the line:

src/app/todo-item/todo-item.component.ts

@Input() item;

It tells the component to expect an input and to assign it to the class member called item. Make sure that Input is added to the import statement in the first line in the file. Now we can use it inside the todo-item template and extract the item's title with interpolation: {{ item.title }}

The component should look like this now:

src/app/todo-item/todo-item.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-todo-item',
  standalone: true,
  imports: [CommonModule],
  template: `
    {{ item.title }}
  `,
  styleUrl: './todo-item.component.scss'
})
export class TodoItemComponent {
  @Input() item;
}

Now we need to pass an item where we use the component. Go back to app-root component and pass the item title to the todo-item:

src/app/app.component.ts

<ul>
  @for(let todoItem of todoList; track todoItem.title) {
    <li>
      <app-todo-item [item]="todoItem"></app-todo-item>
    </li>
  }
</ul>

The item 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.

💾 Save your code to GitHub

StackBlitz users - press Save in the toolbar and continue to the next section of the tutorial.

Commit all your changes by running this command in your project directory.

git add -A && git commit -m "Your Message"

Push your changes to GitHub by running this command in your project directory.

git push

See the results on StackBlitz