private departments: any[] = [
    { id: 1, name: 'department1' },
    { id: 2, name: 'department2' },
    { id: 3, name: 'department3' }
    { id: 4, name: 'department4' },
    { id: 5, name: 'department5' },
    { id: 6, name: 'department6' }
  ];

private employees: any[] = {
    {
      name: 'employee1',
      department: [2, 3, 4],
      email: [ 'bla@gmail.com', 'bar@gmail.com', 'foo@hotmail.com'
   ]
 }
}

stateGroups: StateGroup[] = [{
   name:"employee1",
   grouping:[{
    label: 'email',
    names: [ 'bla@gmail.com', 'bar@gmail.com', 'foo@hotmail.com'
   ]
   },
   {
    label: 'Department',
    names: ['department2', 'department3', 'department4']
   }]
 }];

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
import {Observable} from 'rxjs';
import {startWith, map} from 'rxjs/operators';
export interface StateGroup {
  name:string,
  grouping: {label:string; names: string[]}[]
}

export const _filter = (opt: string[], value: string): string[] => {
  const filterValue = value.toLowerCase();

  return opt.filter(item => item.toLowerCase().indexOf(filterValue) === 0);
};

    @Component({
      selector: 'autocomplete-optgroup-example',
      templateUrl: './autocomplete-optgroup-example.html',
      styleUrls: ['./autocomplete-optgroup-example.css'],
    })

    export class AutocompleteOptgroupExample implements OnInit {
      stateForm: FormGroup = this.fb.group({
        stateGroup: '',
      });

      stateGroups: StateGroup[] = [{
       name:"employee1",
       grouping:[{
        label: 'email',
        names: [ 'bla@gmail.com', 'bar@gmail.com', 'foo@hotmail.com'
       ]
       },
       {
        label: 'Department',
        names: ['department1', 'department2', 'department3']
       }]
     }];

      private employees: any[] = [
        {
          name: 'employee1',
          department: [2, 3, 4],
          mail: [ 'bla@gmail.com', 'bar@gmail.com', 'foo@hotmail.com'
          ]
        }
      ];

      private departments: any[] = [
        { id: 1, name: 'department1' },
        { id: 2, name: 'department2' },
        { id: 3, name: 'department3' },
        { id: 4, name: 'department4' },
        { id: 5, name: 'department5' },
        { id: 6, name: 'department6' },
        { id: 8, name: 'department7' },
        { id: 9, name: 'department8' },
      ];
    </code>
      stateGroupOptions: Observable<StateGroup[]>;

      constructor(private fb: FormBuilder) {}


    <code>
      ngOnInit() {
        this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges
          .pipe(
            startWith(''),
            map(value => this._filterGroup(value))
          );
      }





      private _filterGroup(value: string): any[] {
            if (value) {
              return this.stateGroups[0].grouping
                .map(group => ({label: group.label, names: _filter(group.names, value)}))
                .filter(group => group.names.length > 0);
            }

        return this.stateGroups[0].grouping;
      }
    }


<form [formGroup]="stateForm">
  <mat-form-field>
    <input type="text" matInput placeholder="States Group" formControlName="stateGroup" required [matAutocomplete]="autoGroup">
      <mat-autocomplete #autoGroup="matAutocomplete">
        <mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.label">
          <mat-option *ngFor="let name of group.names" [value]="name">
            {{name}}
          </mat-option>
      </mat-optgroup>
    </mat-autocomplete>
  </mat-form-field>
</form>