#10: ➕ Criando o componente todo-item

Vamos criar um novo componente que mostre cada todo-item presente na lista. Será um componente simples no começo, mas irá crescer posteriormente. O importante é que ele receberá o todo-item como uma entrada do componente pai. Deste modo poderá ser um componente reutilizável, e não dependerá diretamente dos dados e estados da aplicação.

Crie um novo componente chamado todo-item:

ng g c todo-item

Você pode ver uma nova pasta criada - src/app/todo-item com os arquivos do componente.

Use o novo componente no template do app-root - dentro do elemento <li>:

<ul>
  <li *ngFor="let todoItem of todoList">
    <app-todo-item></app-todo-item>
  </li>
</ul>

Confira o resultado no navegador. O que você vê? Por que?

@Input()

Nós queremos exibir o título de cada item dentro do componente todo-item. Precisamos passar o título atual do item no loop (ou o item inteiro) para o o componente todo-item.

Novamente, Angular faz com que seja muito fácil para nós, fornecendo-nos o decorator Input.

Dentro da classe recém criada TodoItemComponent em todo-item.component.ts adicione a linha:

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

@Input() item;

Ele diz ao componente para esperar uma entrada e a atribuir ao membro da classe item. Certifique-se de que Input está adicionado na declaração de importação na primeira linha do arquivo. Agora podemos usá-lo dentro do todo-item template e extrair o título do item com a interpolação : {{ item.title }}

O componente deverá ser apresentado como:

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

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

@Component({
  selector: 'app-todo-item',
  template: `
    {{ item.title }}
  `,
  styleUrls: ['./todo-item.component.css']
})
export class TodoItemComponent implements OnInit {
  @Input() item;

  constructor() { }

  ngOnInit() {
  }

}

Agora nós precisamos passar um item do qual utilizamos o componente. Volte para o componente app-root e passe o título do item para o todo-item.

<ul>
  <li *ngFor="let todoItem of todoList">
    <app-todo-item [item]="todoItem"></app-todo-item>
  </li>
</ul>

O item entre colchetes é o mesmo declarado como o @Input do componente.

Usamos a vinculação de propriedades em um elemento que nós mesmas criamos! E agora podemos realmente ver e entender que a vinculação de propriedades se vincula a uma propriedade real do componente. Em breve, veremos como essa lista pode ser dinâmica.