CODEWITHSUNDEEP
htmlangulartypescript
Pleasure
Pleasure

Reputation: 319

How to disable and enable button in angular

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

Upvotes: 2

Views: 31196

Answers (4)

Himanshu Singh
Himanshu Singh

Reputation: 2165

Declare a property showButton which will be used to decide whether button will be displayed or not. And when you insert a new record make this showButton property to true which will lead to show the button like shown in the demo. Then in your template you can easily use *ngIf to decide whether to show the button or not.

app.component.html

<button (click)="addButtonHandler()">
  add record
</button>

<table >
  <tr>
    <th>Name</th>
    <th>Action</th>
  </tr>
  <tr *ngFor = "let val of item">
    <td>{{val.name}}</td>
    <td *ngIf="val.showButton"><button>click me</button></td>
  </tr>
</table>

app.component.ts

 name = 'Angular';
 item:Item[]=[]
  constructor(){
    this.item.push({
        'name':'Monica',
        'showButton':false
    })

    this.item.push({
        'name':'Rachel',
        'showButton':false
    })
  }

  addButtonHandler(){
    this.item.push({
      'name':'phoebe',
      'showButton':true
    })
  }

Working demo: link

Upvotes: 0

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

Create a dummy array containing the index of newly added object. And then make condition on that array in *ngIf.

Html

<button type="button" class="btn btn-danger"
    (click)=remove(i) *ngIf="deleteButtonShowIndex.indexOf(i) !== -1">
    <i class="glyphicon glyphicon-remove"></i>
</button>

Component

deleteButtonShowIndex = [];
addObj(index) {
   deleteButtonShowIndex.push(index);
   this.Array1.push(this.List[index]);
   this.List.splice(index, 1)
}

The better approach I will suggest is to maintain a flag in this.Array1 as shown below:

this.Array1 = [{
    show: false,
    data: {}
  },
  {
    show: false,
    data: {}
  },
  {
    show: true,
    data: {}
  }
];

Upvotes: 0

Aamer Shahzad
Aamer Shahzad

Reputation: 2947

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>

Upvotes: 11

Abhi
Abhi

Reputation: 684

try this

<button type="button" class="btn btn-danger"
    (click)=remove(i) [disabled]="!show">
    <i class="glyphicon glyphicon-remove"></i>button
</button>



//..
show = 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.show = true;
   this.List.splice(index, 1)
}

Upvotes: 0

Related Questions