button disable/enable in an ngfor loop

user_9071444 0
Viewed 224

I am fetching data from a rest API and using ng-for to loop through the data. The below image is my generated UI using ng-for I want to toggle between the start and stop button when the start button is pressed it must be disabled and stop should be enabled and vice-versa I tried doing this using [disabled] and boolean values but it is applied to the all the generated components inside the loop I want this logic to be applied only to the particular unique id.

my html

 <div class="flex flex-row justify-center items-center font-semibold bg-gray-100 rounded-xl lg:mx-36 sm:mx-2 p-1 my-3  dark:bg-gray-500 dark:text-white" *ngFor="let items of Fts2Array">
<div class="p-3 py-4 md:text-base sm:text-base font-normal lg:px-3 bg-gray-100 dark:bg-gray-500 dark:text-white">id: {{items.id}}</div>
<div class="p-3 md:text-xl sm:text-base font-semibold lg:px-3 bg-gray-100 dark:bg-gray-500 dark:text-white">
  <h1 class="bg-gray-100 dark:bg-gray-500 dark:text-white">{{items.name}}</h1>
</div>
<div class="lg:px-3  bg-gray-100 dark:bg-gray-500 dark:text-black">
  <button class="uppercase font-normal bg-green-400 hover:bg-green-600 hover:text-white p-1 rounded-lg "  (click)="start( items.id , items.name+' with ID '+items.id+' is started')"  >Start</button>
</div>
<div class="lg:px-3  px-2 bg-gray-100 dark:bg-gray-500 dark:text-black">
  <button class="uppercase font-normal bg-red-400 hover:bg-red-600 hover:text-white p-1 rounded-lg" (click)="stop( items.id ,items.name+' with ID '+items.id+' is stopped')" >Stop</button>
</div>

my ts file

start(id:any , message){


  console.log(id);
  this.onSuccess(message);
}

stop(id:any , message){

  console.log(id);
  this.onStop(message);

}

 onSuccess(message ) {

     this.service.success('success' ,message, {
      position:['bottom','right'],
      timeOut: 2000,
      animate:'fade',
      showProgressBar:true

    } );
  }


  onStop(message) {
 
    this.service.error('Terminated' ,message, {
      position:['bottom','right'],
      timeOut: 2000,
      animate:'fade',
      showProgressBar:true

    } );
  }

my output sample

any type of help or suggestion given is hugely appreaciated

Thanks in advance

ngfor angular typescript boolean css
2 Answers

Every row/object should have a boolean field isRunning. keep this field in button disabled directive. In start button: [disabled]="urObj.isRunning" In stop button: [disabled]="!urObj.isRunning"

on button click event you have to change status: (click)="urObj.isRunning=!urObj.isRunning"

user_119437000

You can try ngClass which will help you to disable a button based on cases. Here I have added two extra properties - enabled and disabled in your items object which will help to differentiate between enabled and disabled.

<div class="lg:px-3  bg-gray-100 dark:bg-gray-500 dark:text-black">
  <button [ngClass]="{'enabled':items.enabled,'disabled':items.disabled}" (click)="start( items.id , items.name+' with ID '+items.id+' is started')"  >Start</button>
</div>
<div class="lg:px-3  px-2 bg-gray-100 dark:bg-gray-500 dark:text-black">
  <button [ngClass]="{'enabled':items.enabled,'disabled':items.disabled}"  (click)="stop( items.id ,items.name+' with ID '+items.id+' is stopped')" >Stop</button>
</div>
user_81411940
Related