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

Not sure what you are asking! I mean modify disabled variable to true. Are you using that button in the forloop? have you missed some HTML part from question? — Prashant Pimpale
– Prashant Pimpale, Commented Dec 13, 2019 at 11:24
I have lists of objects in a array which I displayed with ngFor. Every roll has delete button and when the app loads I made all delete button hidden. Now if I want to push new object to the array (from another array) I want the button of the new object visible. — Pleasure
– Pleasure, Commented Dec 13, 2019 at 11:28
@Pleasure Post All related HTML code and TS code! forLoop and sample data — Prashant Pimpale
– Prashant Pimpale, Commented Dec 13, 2019 at 11:32
if you set disabled to false then *ngIf="disabled" will always hide the button instead of disabling the button. instead use disabled attribute on button. [disabled]="disabled" — Aamer Shahzad
– Aamer Shahzad, Commented Dec 13, 2019 at 11:45

Aamer Shahzad · Accepted Answer · 2019-12-13 11:39:38Z

11

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>

answered Dec 13, 2019 at 11:39

Aamer Shahzad

2,9871 gold badge30 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pleasure Over a year ago

This solution does not work I have tried it before. When I pushed new object, it enables all other existing buttons.

Aamer Shahzad Over a year ago

yes it will enable all buttons because all buttons are using same variable's value. setting changing its value will enable all buttons or disable all buttons. the exact solution for this problem is to keep a new key: value pair of disabled: false to each object. then bind object.disabled in your button with [disabled] attribute. when you push new items to array then set disabled to true. this can be done by .filter and .map function of JavaScript.

Pleasure Over a year ago

What I did now was to use 2 diff arrays to hold the new and the old obj separated. It seem to work.

Abhi · Accepted Answer · 2019-12-13 11:27:47Z

0

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

answered Dec 13, 2019 at 11:27

Abhi

7142 gold badges15 silver badges33 bronze badges

2 Comments

Pleasure Over a year ago

I did something like this but it only show all the buttons including the existing once. I want to only show for the new obj

Abhi Over a year ago

try creating different variables like "show" for enabling and disabling other buttons.

Surjeet Bhadauriya · Accepted Answer · 2019-12-13 11:55:47Z

0

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: {}
  }
];

edited Dec 13, 2019 at 11:55

answered Dec 13, 2019 at 11:38

Surjeet Bhadauriya

7,2223 gold badges39 silver badges54 bronze badges

10 Comments

Pleasure Over a year ago

Yes, but I was having one issue, that is the button of the new object was showing on wrong/first existing object. The reason was because the existing object's button was hidden. Can you play around the same solution but using [disabled]="disabled" so that the new obj button stays on the same roll?

Surjeet Bhadauriya Over a year ago

Put the condition in disabled but remove !(not)

Pleasure Over a year ago

It is the first index button that is enabled! Why that? The new index button was disabled but the first existing index button was enabled, why?

Pleasure Over a year ago

Your solution seem to work but enabling wrong button

Surjeet Bhadauriya Over a year ago

How you made the condition. Please paste it here!

|

Himanshu Singh · Accepted Answer · 2019-12-13 12:03:53Z

0

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

edited Dec 13, 2019 at 12:03

answered Dec 13, 2019 at 11:54

Himanshu Singh

2,1651 gold badge8 silver badges16 bronze badges

5 Comments

Pleasure Over a year ago

Your demo looks ok but it could not help me because I cannot hard code the buttons.

Himanshu Singh Over a year ago

@Pleasure can you share your code on stackblitz such that we have something to work on.

Pleasure Over a year ago

Is there anyway to achieve the same result as your solution without hard coding 'showButton'?

Himanshu Singh Over a year ago

@Pleasure when you say I have an array of objects with delete button hidden when page loads. how you have created these button and how they are hidden?

Pleasure Over a year ago

Sorry for that, my json did not contain button, I included a button td in the *ngFor. See the updated html in the question. The buttons of Array1 is disabled and when new index is pushed to Array1 from Array2, I want only the delete button of only the new index to be active.

Collectives™ on Stack Overflow

How to disable and enable button in angular

4 Answers 4

Define a variable to `show/hide` the button

3 Comments

2 Comments

10 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Define a variable to show/hide the button

3 Comments

2 Comments

10 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Define a variable to `show/hide` the button