How to implement expand collapse feature with angular mat-optgroup

Question

I need to add the mat-optgroup should be collapse and expand using Angular. I am explaining my code below.

<mat-form-field appearance="outline">
                  <mat-label>Select rules</mat-label>
                  <mat-select placeholder="Pokemon" formControlName="rules" multiple>
                    <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">Select All</mat-option>
                    <mat-optgroup *ngFor="let group of dropdownList" [label]="group.category"
                                  [disabled]="group.disabled">
                      <mat-option *ngFor="let pokemon of group.data" [value]="pokemon.value">
                        {{pokemon.name}}
                      </mat-option>
                    </mat-optgroup>
                  </mat-select>
                </mat-form-field>

Here I am displaying the drop down values in grouping format and currently it looks like below.

Here I need to add expand and collapse feature on grouping value. As per this dropdown user can collapse the MODULARTY and expand it again. I am using angular material. If any body has the solution will be great help.