Ndtyjky

I have created a textbox and attached add (+) and delete (-) buttons horizontally. The first button doesn't have a delete section. Its image is -

Here, i make the add (+) button disappear after first add because of coding dependency.

Now after the required additions/deletions , i get UI as -

**console output **

 inside addOne(), ngModel = 1

inside addOne , selectedAPIName = ["1"]

inside addOneMore , selectedAPIName = (2) ["1", "2"]

inside addOneMore , selectedAPIName = (3) ["1", "2", "3"]

inside addOneMore , selectedAPIName = (4) ["1", "2", "3", "4"]

However, after clicking on the delete button repeatedly, i end up like this, without any buttons to re-start or re-invoke after all deletions-

Please help . Is there anyway to get the again start over again without page reload ?

code-
app.component.html

<div *ngIf="addContainer">

  <p style="margin-left: 200px; font-size:18px">Please enter the API Object -</p>



  <table align="center">



    <tbody>

      <tr>

        <td>

          <input *ngIf="addMore" type="text" placeholder="Enter a Node" [(ngModel)]="firstApiMining">

        </td>

        <td>

          <button type="button" style="margin-left: 10px" *ngIf="clickAgain" (click)="addOne(firstApiMining)" class="btn btn-success"> + </button>

        </td>

        <!-- <td>

          <button type="button" style="margin-left: 10px" class="btn btn-danger"> - </button>

        </td> -->

      </tr>







      <tr *ngFor="let container of containers; let i = index;" [(ngModel)]="miningname" #myElement ngDefaultControl>

        <ng-container>

          <td id="1myElement">

            <input *ngIf="addMore" type="text" placeholder="Enter a Node">

          </td>

          <td id="1myElement">

            <button type="button" style="margin-left: 10px" (click)="addOneMore(miningname)" class="btn btn-success"> + </button>

          </td>

          <td>

            <button type="button" style="margin-left: 10px" (click)="deleteOneMore(i)" class="btn btn-danger"> - </button>

          </td>

        </ng-container>

      </tr>







      <tr>



        <td style="text-align:center">

          <button type="button" (click)="showGraphs()" class="btn btn-dark">Search</button>

        </td>

      </tr>

    </tbody>

  </table>



</div>

app.component.ts

 addOne(firstApiMining){

    this.addContainer = true;

    this.addMore = true;

    this.clickAgain = false;

    this.containers.push(this.containers.length);

    console.log("inside addOne(), ngModel =", firstApiMining);

  this.selectedAPIName.push(firstApiMining);

  console.log("inside addOne , selectedAPIName =", this.selectedAPIName)

  }





  addOneMore(moreAPIName) {



      this.addContainer = true;

      this.addMore = true;

      this.containers.push(this.containers.length);

      this.selectedAPIName.push(moreAPIName);

      console.log("inside addOneMore , selectedAPIName =", this.selectedAPIName);

  }



  deleteOneMore(index){



      this.containers.splice(index, 1);

      console.log("this.index =", index)

      console.log("inside delete , api-mining-ngmodel-name = ", this.miningname);

      this.selectedAPIName.splice(index+1,1);

      console.log("inside deleteOneMore(), this.selectedAPIName =", this.selectedAPIName);

  }





  showGraphs() {

      console.log("inside showGraphs()")

      this.showEwayBill = true;

      this.showCollection = true;

       this.EwayBill();



  }

Issue 2

Please help me resolve this-

I am able to delete in the first go . But when i deleted all the previous text-boxes, I am left with this -

console output

 inside deleteOneMore(), this.selectedAPIName = ["1"]

And clicking the add (+)button again, i get this output

**console output **

 inside addOne , selectedAPIName = (2) ["1", "1"]

here --> "1" is repeated, so the sequence of numbers is uneven and there is issue while deleting the relevant textbox value

when you delete an item you need to check if their is no more items and if true enable the add button of the first item :

deleteOneMore(index){

    this.containers.splice(index, 1);

    if(this.containers.length == 0){

        this.clickAgain = true;

    }

    console.log("this.index =", index)

    console.log("inside delete , api-mining-ngmodel-name = ", this.miningname);

    this.selectedAPIName.splice(index+1,1);

    console.log("inside deleteOneMore(), this.selectedAPIName =", this.selectedAPIName);

}