How to copy an html block when clicking a button on the Angular?

2

I'm developing an ionic / angular application with a BD firestore so that's fine. I'd like to do this post link I can inject the code via "ng-template" but I do not know how I can make it repeat every time I click it.

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>
    
asked by anonymous 03.10.2018 / 19:24

1 answer

2

You can use the * ngFor directive to resolve your issue. You should keep the items that you want to display in an array variable, and use the * ngFor directive to iterate through these items and dynamically add them to your screen.

Take a look at the ngFor documentation that is available here link

    
03.10.2018 / 20:38