Dependent dynamic dropdown in Angular

Question

I have a component(parent), where I am loading a single select option(Angular Material) and a multi select(Angular Material) option by an api call. I want to have a dependant dropdown, where if I select a certain option from the single select, the multi select will get filtered based on that. I do not have any ID only label and value(unique). Is there any other way to filter? The following is my parent component where I am sending the data for dropdown.

 if (pr.searchOption == "1") {
        (
          await this.rService.listItems(
            "96",
            "ID",
            "query"
          )
        ).subscribe((data) => {
          this.dcr.addNew(
            "mat-single-select",
            pr.columnName,
            pr.columnCaption,
            pr.columnCaption,
            "",
            "",
            data
          );
        });

Both the single select and multi select is in different component. And here the 'data' contains the dropdown options which is later on passed to select options component, like below,

For single select ts file,

export class MatSelectComponent {
    @Input() public name: string;
    @Input() public placeholder: string;
    @Input() public label: string;
    @Input() public hint: string;
    @Input() public icon: string;
    @Input() public allData: any[];

allData receiving the dropdown options from the parent component. And its html is below,

<mat-form-field [style.width]="'100%'" appearance="outline">
   <mat-select
        placeholder="Using array of objects"
        (selectionChange)="onSelect($event)"
   >
        <mat-select-filter
          [placeholder]="'Filter'"
          [displayMember]="'label'"
          [array]="allData"
          (filteredReturn)="filteredList5 = $event"
        ></mat-select-filter>
        <mat-option *ngFor="let item of filteredList5" value="{{ item.id }}">
          {{ item.label }}
        </mat-option>
   </mat-select>
</mat-form-field>