disabled button on clicked passing an id in angular

Question

I'm trying to disable a button when clicked passing an id, I don't want to do it with let i = index, as, when I cancel a build the next button gets the index of the row that disappear and disables it even when not pressed.

I am trying to do this in my .html:

 <ng-container matColumnDef="buildId">
        <th mat-header-cell *matHeaderCellDef> Cancel </th>
        <td mat-cell *matCellDef="let element">

          <button mat-flat-button color="accent" [disabled]="clicked[element.buildId]"
            (click)="cancelBuildingImage(element.buildId)">
            Cancel Build
          </button>
        </td>
</ng-container>

my .ts:


export class BuildingImagesComponent implements OnInit, OnDestroy {
  buildingImageList: BuildingImage[];
  displayedColumns: string[] = ["tag", "created", "startedBuilding", "finishDate", "buildId"];
  buildingImageErrorMessage: string;
  callLoop: any;
  clicked: any[];

constructor(private builderService: BuilderService, private snackMessageService: SnackMessageService) {
    this.buildingImageList = new Array();
    this.callLoop = setInterval(() => { this.populateBuildingImageList() }, 15000);
    this.clicked = []
  }

 public cancelBuildingImage(buildId: string): void {
    this.builderService.cancelBuildingImage(buildId).then(() => {
      this.snackMessageService.sendMessage("Build canceled.");

      this.populateBuildingImageList();
      this.buildingImageList.forEach(el => {
        this.clicked.push(buildId);
      });
    }).catch(() => {
      this.buildingImageErrorMessage = "Oops, there was an error canceling the image build."
    });
  }

It doesn't disables the button when clicked. Why is that?

The console of the browser displays this warning (not error)-->

*It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });*

Thanks in advance

[disabled] attribute expects a boolean. Try [disabled]="element.buildId === clicked[element.buildId]". — Michael D

Doflamingo19 Doflamingo19 · Accepted Answer · 2020-02-21T10:14:37

try this inyour html modify button

<td mat-cell *matCellDef="let element;let i=index" #someContainer>
     <button mat-flat-button color="accent" 
                (click)="cancelBuildingImage(element.buildId,i)">
                Cancel Build
              </button>
</td>

and in your .ts do this:

  @ViewChildren('someContainer') someDivs:ElementRef;

     public cancelBuildingImage(buildId: string,index: number,$event): void { //here modified
  someDivs.toArray()[index].nativeElement.classList.add('disable');

     this.builderService.cancelBuildingImage(buildId).then(() => {
          this.snackMessageService.sendMessage("Build canceled.");

          this.populateBuildingImageList();

          this.buildingImageList.forEach(el => {
            this.clicked.push(buildId);
          });
        }).catch(() => {
          this.buildingImageErrorMessage = "Oops, there was an error canceling the image build."
        });
      }

I think must work try this.

disabled button on clicked passing an id in angular

1 Answers