CODEWITHSUNDEEP
angularngfor
Retry
Retry

Reputation: 43

disable buttons in ngFor loop

I want to disable buttons inside by ngFor loop.I set the i-index inside ngFor but the issue is that it only disables the button with the id of i.If i want to disable multiple buttons inside this loop what should i do?

Lets say i have 5 buttons.I want to disable the button number 1.After i want to disable 2.With this code when i change to 2 the 1 goes back to enable.

<div *ngFor="let day of days let i=index">
    <ion-button id={{day}} expand="block" size="large" (click)="test(day)" ngDefaultControl [(ngModel)]="days" [disabled]="i==dayFinished" >DAY {{day}}</ion-button>
</div>

And in the .ts file :

   dayFinished = null;
   this.dayFinished = this.route.snapshot.paramMap.get("id");
   this.dayFinished -= 1;

Upvotes: 0

Views: 3036

Answers (2)

H Mirindra
H Mirindra

Reputation: 94

You can use an array of object like this [{day: 1, disabled: true}, {day: 2, disabled: false}], then you use the property 'disabled' for the accessibility and the 'day' to display You do the logic for the true/false in the component

<div *ngFor="let item of objectArray let i=index">
    <ion-button id={{item.day}} expand="block" size="large" (click)="test(item.day)" ngDefaultControl [(ngModel)]="days" [disabled]="item.disabled" >DAY {{item.day}}</ion-button>

Upvotes: 1

Joel Joseph
Joel Joseph

Reputation: 6169

if you want to disable days that you have clicked then

html

<div *ngFor="let day of days let i=index">
    <ion-button id={{day}} expand="block" size="large" (click)="test(day)" ngDefaultControl [(ngModel)]="days" [disabled]="checkIfFinnished(day)" >DAY {{day}}</ion-button>
 </div>

In component.ts file 

   dayFinished = [];

   this.dayFinished.push(this.route.snapshot.paramMap.get("id"));


  test(day){
   if(this.dayFinished.includes(day)){
      this.dayFinished.splice(this.dayFinished.indexOf(day),1);
   }
   else
   { 
    this.dayFinished.push(day);
   }
  }

  checkIfFinnished(item){
     return  this.dayFinished.includes(item);
   }

Upvotes: 0

Related Questions