Angular: using single variable for multiple buttons action

Question

I want to use single varible for multiple buttons to enable and disable, individually.

<button class="button" [disabled]="btnState" (click)="function('val1')"> button 1</button>
<button class="button" [disabled]="btnState" (click)="function('val2')"> button 2</button>
<button class="button" [disabled]="btnState" (click)="function('val3')"> button 3</button>
<button class="button" [disabled]="btnState" (click)="function('val4')"> button 4</button>

How do I enable or disable the above buttons individually based on selection? I tried only with a result of disabling all of them or enabling all of them.

Faly · Accepted Answer · 2018-03-26 11:00:01Z

2

You can keep track state of the buttons:

<button class="button" [disabled]="buttonStates['button1']" (click)="onToggle('button1')"> button 1</button>
<button class="button" [disabled]="buttonStates['button2']" (click)="onToggle('button2')"> button 2</button>
<button class="button" [disabled]="buttonStates['button3']" (click)="onToggle('button3')"> button 3</button>
<button class="button" [disabled]="buttonStates['button4']" (click)="onToggle('button4')"> button 4</button>


export class YourComponent {
  buttonStates: any = {
    button1: true,
    button2: false,
    button3: false,
    button4: true
  };
  onToggle(button) {
    this.buttonStates[button] = !this.buttonStates[button];
  }
}

answered Mar 26, 2018 at 11:00

Faly

13.4k2 gold badges21 silver badges39 bronze badges

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

Comments

cyberpirate92 · Accepted Answer · 2018-03-26 10:57:30Z

1

You can use an array, since it's technically a single variable

HTML

<button class="button" [disabled]="btnState[0]" (click)="foo('val1')"> button 1</button>
<button class="button" [disabled]="btnState[1]" (click)="foo('val2')"> button 2</button>
<button class="button" [disabled]="btnState[2]" (click)="foo('val3')"> button 3</button>
<button class="button" [disabled]="btnState[3]" (click)="foo('val4')"> button 4</button>

app.component.ts

btnState = [false, false, true, true];

Stackblitz

Or, you can even use an object

HTML

<button class="button" [disabled]="btnState.btn1" (click)="foo('val1')"> button 1</button>
<button class="button" [disabled]="btnState.btn2" (click)="foo('val2')"> button 2</button>
<button class="button" [disabled]="btnState.btn3" (click)="foo('val3')"> button 3</button>
<button class="button" [disabled]="btnState.btn4" (click)="foo('val4')"> button 4</button>

app.component.ts

btnState = {
    btn1: true,
    btn2: false,
    btn3: true,
    btn4: false,
};

Stackblitz

answered Mar 26, 2018 at 10:57

cyberpirate92

3,1865 gold badges30 silver badges48 bronze badges

3 Comments

Hinrich Over a year ago

I strongly prefer the use of an object here. This is not really a good use case for an array, although it would technically work of, course.

cyberpirate92 Over a year ago

Agreed, just putting out the possible ways :)

Ravikumar Govindaraj Over a year ago

Thanks.. yep, i was using object using services and DI, though the question i posted has only 4, in my original project i have close 35 buttons as of now and this may grow. hence was looking for a solution with single variable.

John · Accepted Answer · 2018-03-26 10:59:54Z

0

Why do you want a single variable? If you do, I would use a map for it.

<button class="button" [disabled]="btnState['val1']" (click)="btnClickFunction('val1')"> button 1</button>
<button class="button" [disabled]="btnState['val2']" (click)="btnClickFunction('val2')"> button 2</button>
<button class="button" [disabled]="btnState['val3']" (click)="btnClickFunction('val3')"> button 3</button>
<button class="button" [disabled]="btnState['val4']" (click)="btnClickFunction('val4')"> button 4</button>

and in your clickFunction:

btnClickFunction(val){
   if(!this.btnState.hasOwnProperty(val)){
      this.btnState[val] = false;
   }
   this.btnState[val] = !this.btnState[val];
}

answered Mar 26, 2018 at 10:59

John

11.6k5 gold badges60 silver badges75 bronze badges

1 Comment

Ravikumar Govindaraj Over a year ago

Thanks, will try this one, the orignial project contains more than 35 buttons as of now and it may grow over a period, though using services and object we can achieve with ease, but was looking for more simple and concise version.

Collectives™ on Stack Overflow

Angular: using single variable for multiple buttons action

3 Answers 3

Comments

Stackblitz

Stackblitz

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related