unable to re-invoke the button after dynamic addition/deletion in angular2 +

Question

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


  Please enter the API Object -

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

user_6703925 · Answer

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);
}

unable to re-invoke the button after dynamic addition/deletion in angular2 +

1 Answers