CODEWITHSUNDEEP
javascripthtmlangulartypescriptbutton
New123
New123

Reputation: 219

Disable/Enable multiple buttons inside ngFor with a condition on ngIf

I have a list of buttons which needs to be enabled/disabled based on a condition at once two or three buttons may be disabled.

<li *ngFor="let button of buttons; let i = index">
   <button *ngIf="disableButtonIndex  && i+1 == disableButtonIndex" class="btn btn-lg btn-primary" disabled> {{ button.title }}</button>
   <button *ngIf="!(disableButtonIndex  && i+1 == disableButtonIndex)" (click)="callAction(button.actionName || i)" class="btn btn-lg btn-primary">{{ button.title }}</button>
</li>

.ts

this.disableButtonIndex = 1;

Above code works fine for disabling single button how can i disable two/more buttons

Upvotes: 1

Views: 2986

Answers (3)

Hsuan Lee
Hsuan Lee

Reputation: 2330

You can use an array to save your disabled indexes or add the disabled flag in your button option.

Use disabled array

https://stackblitz.com/edit/angular-sef3nc?file=src%2Fapp%2Fapp.component.html

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  disabledButtons= [1, 2]

  buttons = [
    {
      actionName: 'action1',
      title: 'button1'
    },
    {
      actionName: 'action2',
      title: 'button2'
    },
    {
      actionName: 'action3',
      title: 'button3'
    }
  ]

  callAction(action) {
    console.log(action)
  }
}

<li *ngFor="let button of buttons; let i = index">
   <button class="btn btn-lg btn-primary" 
           [disabled]="disabledButtons.indexOf(i) !== -1"
           (click)="callAction(button.actionName)"> 
           {{ button.title }}
   </button>
</li>

Use flag in option

https://stackblitz.com/edit/angular-zvbepr?file=src%2Fapp%2Fapp.component.html

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  buttons = [
    {
      actionName: 'action1',
      title: 'button1',
      disabled: true
    },
    {
      actionName: 'action2',
      title: 'button2',
      disabled: true
    },
    {
      actionName: 'action3',
      title: 'button3',
      disabled: false
    }
  ]

  callAction(action) {
    console.log(action)
  }
}

<li *ngFor="let button of buttons; let i = index">
   <button class="btn btn-lg btn-primary" 
           [disabled]="button.disabled"
           (click)="callAction(button.actionName)"> 
           {{ button.title }}
   </button>
</li>

Upvotes: 2

Kireeti Ganisetti
Kireeti Ganisetti

Reputation: 236

I think your problem is with next iteration buttons inside li element.

You can store all disable button indexes in an array and check current index exists in array.

<li *ngFor="let button of buttons; let i = index">
   <button [disabled]="disableButtonArr.indexOf((i+1)) === -1" (click)="callAction(button.actionName || i)" class="btn btn-lg btn-primary">{{ button.title }}</button>
</li>

Upvotes: 0

Oscar Velandia
Oscar Velandia

Reputation: 1166

instead of *ngIf you can use [disabled]="expressionToEvaluate"

<li *ngFor="let button of buttons; let i = index">
   <button [disabled]="disableButtonIndex  && i+1 == disableButtonIndex" class="btn btn-lg btn-primary"> {{ button.title }}</button>
   <button [disabled]="!(disableButtonIndex  && i+1 == disableButtonIndex)" (click)="callAction(button.actionName || i)" class="btn btn-lg btn-primary">{{ button.title }}</button>
</li>

Upvotes: 0

Related Questions