#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?
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.
Last modified 3yr ago