Olá, Bianca! Tudo bom, e aí?
Você pode usar a diretiva NgForOf. Diretivas são soluções do Angular que adicionam comportamento para elementos.
No caso da NgForOf, baseada em uma coleção (geralmente uma array), o componente é replicado para cada elemento da coleção. Você pode usá-la com *ngFor, como abaixo:
<td *ngFor="let linha of linhas">
<label> Nome:</label>
<input type="text" id="fname">
<button id="Adicionar"> Adicionar nome </button>
</td>
O que estamos fazendo: para cada item da array linhas, que decidimos chamar de linha, crie essa <td>. Vamos olhar mais a fundo na sintaxe:
<td *ngFor="let <nome-do-item> of <nome-da-array> >
O <nome-do-item> você define no momento da criação do ngFor, isso é útil para caso você queira referenciar esse item, por exemplo:
<td *ngFor="let linha of linhas">
<p>{{ linha.valor }}</p>
</td>
Nesse caso, teríamos uma array (definida no nosso .component.ts) chamada linhas, e para trabalhar com cada item, vamos chamar o item do loop de linha. Cada item da array possui uma propriedade valor ({ valor: 'algum valor' }) e para extrair o conteúdo dessa variável para o HTML usamos o {{ }}.
Note que, para isso funcionar, você precisa passar uma array que exista no .component.ts.
Certo, agora para o comportamento de replicação:
No Angular, podemos escutar eventos com (<nome-do-evento>), por exemplo, se quisermos escutar um click, podemos usar (click), e com base nisso executar um método do componente.
<td *ngFor="let linha of linhas">
<label> Nome:</label>
<input type="text" id="fname">
<button id="Adicionar" (click)="addNome()"> Adicionar nome </button>
</td>
De novo, esse método precisa existir no componente. O método em si precisa adicionar um item na array que o ngFor usa. O componente ficará assim:
export class AppComponent {
linhas = ['']; // precisamos adicionar uma string vazia, porque se inicializarmos a array vazia, o elemento não será apresentado
addNome() {
this.linhas.push(''); // adicionamos uma string vazia
}
}
Atenção: Para usar a diretiva ngFor, você precisa ter importado o módulo CommonModule no módulo do seu componente.
Espero ter ajudado!
