How to copy an html block when you click a button in Angular?

Question

I am developing an Ionic/angular application with a firestore BD up to there everything well. I’d like to do this post link I can inject the code via "ng-template" but I don’t know how to do it to repeat every time I click a button.

adicionarOutroItem(){
// ??????
}

<ion-header>
  <ion-navbar>
    <ion-title>addItem</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <table>
    <tr *ngIf="editar == true">
      <td>Nome da Lista: </td>
      <td><input class="texto3"></td>
    </tr>


    <tr>
      <td>Nome:</td>
      <td><input class="texto3"  [(ngModel)]="nome_item"> </td>
    </tr>

    <tr>
      <td>Quantidade:</td>
      <td>
        <button ion-button class="botaoLista" (click)="diminuirQtd()">-</button> 
        <input type="text" class="texto2" value="{{qtd}}"/> 
        <button ion-button class="botaoLista" (click)="aumentarQtd()">+</button>
      </td>
    </tr>

    <tr>
      <td style="float: right;">Observação:</td>
      <td><textarea [(ngModel)]="obs" rows="10" cols="30" style="margin:2% 0%"></textarea></td>
    </tr>
  </table>
  <button ion-button full color="secondary" (click)="adicionarOutroItem()">Adicionar outro Item</button>
  <br /><br /><br />
  <button ion-button full style="margin-bottom: 3%;" (click)="addItem()">Salvar</button>
  <button ion-button full color="danger" (click)="removeItem()">Deletar</button>

</ion-content>

Answer 1

You can use the *ngFor directive to solve your problem. You should keep the items you want to display in an array type variable, and use the *ngFor directive to iterate those items and add them dynamically on your screen.

Take a look at the ngFor documentation that is available here https://angular.io/guide/displaying-data#Showing-an-array-Property-with-ngfor