I have been working on customizing angular material select/autocomplete to incorporate nested dropdowns for a project.

Specifically, I am looking to create a setup where there is one parent dropdown with multiple child elements. When a particular parent dropdown is expanded, only the corresponding child items should expand or collapse accordingly. Additionally, the checkbox event should be selected in this specific scenario.

However, I encountered an issue where selecting the dropdowns resulted in displaying [object object] instead of the desired outcome.

I have included console logs to showcase the selected and unselected values for troubleshooting purposes.

If anyone could offer assistance or insights on how to address this matter, it would be greatly appreciated.

STACKBLITZ

<mat-form-field appearance="fill">
    <mat-label>Toppings</mat-label>

    <input type="text" matInput placeholder="Select Users" aria-label="Select Users" matInput [matAutocomplete]="auto" [formControl]="states">
    <mat-autocomplete #auto="matAutocomplete">

      <mat-select-trigger>
        {{states.value ? states.value[0] : ''}}
        <span *ngIf="states.value?.length > 1" class="example-additional-selection">
              (+{{states.value.length - 1}} {{states.value?.length === 2 ? 'other' : 'others'}})
            </span>
      </mat-select-trigger>

      <mat-optgroup *ngFor="let group of stateList">
        <div>
          <mat-checkbox [checked]="group.selected" (change)="toggleParent($event, group)" (click)="$event.stopPropagation()">
            {{group.letter}}
          </mat-checkbox>
          <button mat-button (click)="expandDocumentTypes(group)">
                  <mat-icon>keyboard_arrow_down</mat-icon>
              </button>
        </div>
        <mat-option *ngFor="let name of group.names" [value]="name" [ngClass]="isExpandCategory[group.letter] ? 'list-show' : 'list-hide'">
          <mat-checkbox [checked]="group.checked" (change)="toggleSelection($event, name, group)" (click)="$event.stopPropagation()">
            {{name}}
          </mat-checkbox>
        </mat-option>
      </mat-optgroup>

    </mat-autocomplete>
  </mat-form-field>

  

   
  export class SelectCustomTriggerExample {
    constructor(private _formBuilder: FormBuilder) {}

    // stateForm: FormGroup = this._formBuilder.group({
    //   stateGroup: '',
    // });
    // toppings = new FormControl();
    isExpandCategory: boolean[] = [];
    toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
    stateRecord: any = [];
    states = new FormControl();

    expandDocumentTypes(group: any) {
      console.log("expanding dropdown", group);
      this.isExpandCategory[group.letter] = !this.isExpandCategory[group.letter];
      // expand only selected parent dropdown category with that childs
    }

    toggleSelection(event: any, name: any, group: any) {
      debugger;
      console.log("toggleSelection", name, event.checked, group);
      if (event.checked) {
        console.log("stastateRecordtelist", this.stateRecord);
        this.stateRecord.push(name);
        this.states.setValue(this.stateRecord);
        console.log("toggleselection ", this.states.value);
      } else {
        this.stateRecord = this.stateRecord.filter((x: any) => x !== name);
        console.log("else toggleselection", name, group, this.states.value);
        this.states.setValue(this.states.value.filter((x: any) => x !== name));
        console.log("after filter ", this.states.value);
        //this.states.setValue([]);
      }
    }

    toggleParent(event: any, group: any) {
      debugger;
      group.checked = event.checked;
      console.log("event", event.checked, "group", group, "states value", this.states.value);
      let states = this.states.value;
      states = states ? states : [];
      if (event.checked) {
        states.push(...group.names)
      } else {
        console.log("else", states);
        group.names.forEach((x: string) => {
          if (states.indexOf(x) > -1) {
            states.splice(states.indexOf(x), 1)
          }
        });
      }
      this.states.setValue(states);
      console.log("statesvalue", this.states.value);
      if (!event.checked) {
        this.states.setValue(this.states.value.filter((x: any) => !x.includes(group.names)))
        //this.states.setValue([]);
      }
      console.log("final statesvalue", this.states.value);
    }

    stateList = [{
        "letter": "A",
        "checked": false,
        "names": [{
            "id": 1,
            "type": "Alabama"
          },
          {
            "id": 2,
            "type": "Alaska"
          },
          {
            "id": 3,
            "type": "Arizona"
          },
          {
            "id": 4,
            "type": "Arkansas"
          }
        ]
      },
      {
        "letter": "C",
        "checked": false,
        "names": [{
            "id": 8,
            "type": "California"
          },
          {
            "id": 9,
            "type": "Colorado"
          },
          {
            "id": 10,
            "type": "Connecticut"
          }
        ]
      },
      {
        "letter": "D",
        "checked": false,
        "names": [{
            "id": 18,
            "type": "Delaware"
          },
          {
            "id": 19,
            "type": "Denwer"
          }
        ]
      }
    ];
  }
  

The desired output should resemble the image provided below:

https://i.sstatic.net/isWLe.jpg