5

I have list of rows, and each one row has 2 more more buttons. I want to disable button on click event, so once its done ajax call then I can reenable it or hide it completely.

So I'm wondering how can I disable this single button on click event.

how can I disable from event?

<button [disabled]="buttonDisabled" (click)="trigger($event)">

trigger ($event)
{
  $event.buttonDisabled = true; // ?
}
Basit
  • 13,920
  • 29
  • 88
  • 145

1 Answers1

5
<div *ngfor="#row of rows">
  <button [disabled]="awaitingAjaxCall[row] ? true : null" (click)="trigger($event, row)">
</div>

rows: [0,1,2];
awaitingAjaxCall:boolean[] = [false, false, false];
trigger ($event, row)
{
  this.awaitingAjaxCall[row] = true;  
  this.http.get(...).map(...).subscribe(value => {
    this.value = value;
    // or here
    // this.awaitingAjaxCall[row] = false;
  }, error => {},
  () => this.awaitingAjaxCall[row] = false);
}
Günter Zöchbauer
  • 490,478
  • 163
  • 1,733
  • 1,404
  • Your question only has one button. What are the other buttons? Which one(s) do you want to enable/disable? – Günter Zöchbauer Mar 02 '16 at 16:57
  • on my question it says. I have list of rows and each row has 2 or more botton. each button is clickable (after click, it needs to be disabled until ajax call) – Basit Mar 02 '16 at 17:00
  • All buttons of the row where a button was clicked? – Günter Zöchbauer Mar 02 '16 at 17:01
  • I don't know how to answer your question if you can't make it more clear what you want. Could you add a few buttons, name them A, B, C, .... and explain which button is clicked and which buttons should be disabled because of this click an why. – Günter Zöchbauer Mar 02 '16 at 17:05
  • Do you mean only the button that was actually clicked should be disabled? – Günter Zöchbauer Mar 02 '16 at 17:06
  • Yes. only the actual button which is clicked should be disabled. – Basit Mar 02 '16 at 17:07
  • Then it's quite similar to my current answer. I used an id for all buttons of a row. Just change it to use a different id for each button. You can assing it statically `` or dynamically like I did in my answer. This depends on how you create your buttons which is also not obvious from your question. – Günter Zöchbauer Mar 02 '16 at 17:10
  • it has to be from model variable? can't it be from event... like we use to do in jQuery. – Basit Mar 02 '16 at 17:12
  • It don't "has to be" but that's IMHO the Angular way. You can also do `$event.target.enabled = false` ... `$event.target.enabled = true` but you should avoid accessing the DOM imperatively. This might break when you want to use server side rendering or WebWorkers. – Günter Zöchbauer Mar 02 '16 at 17:28
  • I have tried with `$event.target.enabled = false` that did not work at all. – Basit Mar 03 '16 at 08:51
  • 1
    Sorry, my bad :-( There is no `enabled` should be `disabled`. https://plnkr.co/edit/hLCeBl?p=preview – Günter Zöchbauer Mar 03 '16 at 08:55
  • unfortunately it does not work on ionic2, maybe its a bug on there side. not sure. – Basit Mar 03 '16 at 09:09
  • How does it "not work"? Any error?. It's so basic I can not imagine why this shouldn't work if other things are working. – Günter Zöchbauer Mar 03 '16 at 09:12
  • No not any error at all. It just stays enabled. I think it has more handler in the background that might have side effect... – Basit Mar 03 '16 at 09:16