How to disable particular mat-checkbox in angular14

Question

I have used angular material in my application.Trying to disable the particular mat checkbox.I have tried but not working properly. It is disbaling all the checkbox.But i want to disable only Car and Motor checkboxes. How to do it? If anyone konws please help to find the solution.

mautocomponent.html:

  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
  <mat-option
    *ngFor="let data of filteredData | async"
    [value]="data"
    [disabled]="isDisable(data)"
  >
    <div (click)="optionClicked($event, data)">
      <mat-checkbox
        [checked]="data.selected"
        (change)="toggleSelection(data)"
        (click)="$event.stopPropagation()"
        [disabled]="isDisable(data)"
      >
        {{ data.item }}
      </mat-checkbox>
    </div>
  </mat-option>
</mat-autocomplete>

mautocomponent.ts:

      isDisable(obj:any){
    //Only disable Car and Motor
    var index = this.rawData.indexOf(obj);
    console.log(index)
    if (index == -1) {
      return false;
    }
    else {
      return true;
    }

  }

Demo: https://stackblitz.com/edit/angular-ivy-6bvdt7?file=src%2Fapp%2Fshared%2Fmauto%2Fmauto.component.ts

Answer 1

You are so close. Why don't you just use the obj that you are passing to your isDisable() function.

isDisable(obj: any){
    console.log(obj)
    if (obj.item === 'Car' || obj.item === 'Motor') {
      return true;
    }
    else {
      return false;
    }

}

SB demo

OP asked about passing disable list from parent component (app.component.ts). One of the ways to do it would be, passing the list of disable items from parent to chiild.

app.component.ts:
optionsToHide = ['Car', 'Motor'];

app.component.html:
<app-mauto
  ...
  [optionsToHide]="optionsToHide"
  ...
>

mauto.component.ts:

isDisable(obj: any){

  if (this.optionsToHide.findIndex(item => item === obj.item) > -1) 
  {
    return true;
  }
  else {
    return false;
  }
}