How to disable and enable button in angular

Question

I have an array of objects with delete button hidden when page loads. Now I want to show the delete button when new object is pushed to the array, the existing objects button should still remain hidden. How do I hide existing buttons and only show new object delete button.

html

<div>
 <table >
   <tr>//.....</tr>
   <tr *ngFor="list of Array1">
      <td><button type="button" class="btn btn-danger"
          (click)=remove(i) [disabled]="disabled">
           <i class="glyphicon glyphicon-remove"></i>
          </button></td>
      <td>{{list.type}}</td>
      <td>{{list.year}}</td>
   </tr>
 </table>
</div>
<div>
 <table >
   <tr>//.....</tr>
   <tr *ngFor="list of Array2">
      <td><button type="button" class="btn btn-secondary"
          (click)=addObj(i)>
           <i class="glyphicon glyphicon-plus"></i>
          </button></td>
      <td>{{list.type}}</td>
      <td>{{list.year}}</td>
   </tr>
 </table>
</div>

Here is the code used for adding new object from another array:

ts

//..
disabled = false;

....
addObj(index) {
   // is there a way I can enable the delete button of just the index pushed?
   this.Array1.push(this.List[index]);
   this.List.splice(index, 1)
}

Answer 1

Define a variable to show/hide the button

isDisabled = true;

Then change the variable state in your code where you are pushing new items to the array. It could be any method or inside subscriber etc.

this.isDisabled = false; // or this.isDisabled = !this.isDisabled;

then in your button bind disabled attribute with this isDisabled variable.

[disabled]="isDisabled"

Complete Button Example

<button (click)="delete(item.id)" [disabled]="isDisabled">Delete</button>