How to disable Option from mat-select based on Condition - html

Question

I two mat-select, in the first one I select the type of Customer Individual or Organizational Customer.
If User selects Ind Customer I show another mat-select.
However, the issue is in second mat-select the dropdown options I want to disable certain input fields. How can I achieve that?
HTML Code to select Type of Customer
<mat-form-field>
<mat-label>Select Customer Type</mat-label>
<mat-select (onSelectionChange)="getCustType($event)">
<mat-option *ngFor="let obj of custType" (click)="getCustType(obj)"
[value]="obj" > {{ obj.viewValue }}</mat-option>
</mat-select>
</mat-form-field>
Typescript code:
custType: any[] = [{ value: 'indCust', viewValue: 'IndividualCustomer' }, { value: 'orgCust', viewValue: 'Organizational Customer' }];
Second Dropdown HTML CODE :
<mat-form-field class="col-sm-3">
<mat-label>Select Option to Edit</mat-label>
<mat-select (onSelectionChange)="getoptiontoedit($event)" >
<mat-option *ngFor="let obj of optiontoeditlist" (click)="getoptiontoedit(obj)" [value]="obj"> {{ obj.viewValue }}</mat-option>
</mat-select>
</mat-form-field>
Typescript Code for Second Dropdown:
optiontoeditlist: any[] = [
{ value: 'address', viewValue: 'Address' },
{ value: 'agentRelationship', viewValue: 'Agent Relationship' },
{ value: 'agreementRelationship', viewValue: 'Agreement Relationship' },
{ value: 'organizationCustomer', viewValue: 'Organization Customer' },
{ value: 'complaint', viewValue: 'Complaint' },
{ value: 'contact', viewValue: 'Contact' },
{ value: 'identification', viewValue: 'Identification' },
{ value: 'individualCustomer', viewValue: 'Individual Customer'}
];
I want to disable/hide individualCustomer option from the second dropdown if a user selects Organization Customer in the first dropdown similarly I want to disable/hide OrganazationalCustomer from the second dropdown if a user selects Individual Customer in the first dropdown.

Answer 1

You can implement a pipe for your second options list like below
#Pipe({ name: 'optfilter' })
export class OptionsFilterPipe implements PipeTransform {
transform(alloptions: any[],firstSelectOpt: any<>) {
return alloptions.filter(option => option.value.indexOf(firstSelectOpt.value)==-1); // or whatever your comparator condition is this just for indication
}
}
Then you can use it like
<mat-option *ngFor="let obj of optiontoeditlist | optFilter: 'selectedFirstOption'"