title: How to customize mat select option group to allow nested values in angular
body: <p>I'm customizing angular material select/autocomplete to allow nested dropdowns.</p>
  <p>Here, I wanted to have one parent dropdown with many childs. If I expand particular parent dropdown, only childs of that dropdown should expand or collapse. Similarly, checkbox event should be selected in the same scenario.</p>
  <p>I'm facing two issues.</p>
  <ol>
  <li>search/autocomplete is not working.</li>
  <li>Checking parent Checkbox should select all childs associated with it.</li>
  </ol>
  <p>Can someone help me what I'm missing here.</p>
  <p>Here is my code. <a href="https://stackblitz.com/edit/angular-f5mizr" rel="nofollow noreferrer">STACKBLITZ</a></p>
  <p>References:</p>
  <p><a href="https://stackblitz.com/edit/angular-evacck-qubgyy" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-evacck-qubgyy</a></p>
  <p><a href="https://stackblitz.com/angular/eboprqqnooy" rel="nofollow noreferrer">https://stackblitz.com/angular/eboprqqnooy</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class SelectCustomTriggerExample {
    toppings = new FormControl();
     isExpandCategory: boolean = false;
    toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
  
    states = new FormControl();
  
    expandDocumentTypes(category) {
      console.log("expanding dropdown", category);
      this.isExpandCategory = !this.isExpandCategory;
    }
  
    stateList: StateGroup[] = [{
      letter: 'A',
      names: ['Alabama', 'Alaska', 'Arizona', 'Arkansas']
    }, {
      letter: 'C',
      names: ['California', 'Colorado', 'Connecticut']
    }, {
      letter: 'D',
      names: ['Delaware']
    }, {
      letter: 'F',
      names: ['Florida']
    }, {
      letter: 'G',
      names: ['Georgia']
    }, {
      letter: 'H',
      names: ['Hawaii']
    }, {
      letter: 'I',
      names: ['Idaho', 'Illinois', 'Indiana', 'Iowa']
    }, {
      letter: 'K',
      names: ['Kansas', 'Kentucky']
    }, {
      letter: 'L',
      names: ['Louisiana']
    }, {
      letter: 'M',
      names: ['Maine', 'Maryland', 'Massachusetts', 'Michigan',
        'Minnesota', 'Mississippi', 'Missouri', 'Montana']
    }, {
      letter: 'N',
      names: ['Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',
        'New Mexico', 'New York', 'North Carolina', 'North Dakota']
    }, {
      letter: 'O',
      names: ['Ohio', 'Oklahoma', 'Oregon']
    }, {
      letter: 'P',
      names: ['Pennsylvania']
    }, {
      letter: 'R',
      names: ['Rhode Island']
    }, {
      letter: 'S',
      names: ['South Carolina', 'South Dakota']
    }, {
      letter: 'T',
      names: ['Tennessee', 'Texas']
    }, {
      letter: 'U',
      names: ['Utah']
    }, {
      letter: 'V',
      names: ['Vermont', 'Virginia']
    }, {
      letter: 'W',
      names: ['Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
    }];
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-form-field appearance="fill"&gt;
    &lt;mat-label&gt;Toppings&lt;/mat-label&gt;
    &lt;mat-select [formControl]="states" multiple&gt;
      &lt;mat-select-trigger&gt;
        {{states.value ? states.value[0] : ''}}
        &lt;span *ngIf="states.value?.length &gt; 1" class="example-additional-selection"&gt;
          (+{{states.value.length - 1}} {{states.value?.length === 2 ? 'other' : 'others'}})
        &lt;/span&gt;
      &lt;/mat-select-trigger&gt;
  
    &lt;mat-optgroup *ngFor="let group of stateList"&gt;
            &lt;div&gt;
            &lt;mat-checkbox [checked]="group.selected" (change)="toggleSelection(user)" 
              (click)="$event.stopPropagation()"&gt;
                      {{group.letter}}
                  &lt;/mat-checkbox&gt;
            &lt;button mat-button (click)="expandDocumentTypes(group)"&gt;
              &lt;mat-icon&gt;keyboard_arrow_down&lt;/mat-icon&gt;
            &lt;/button&gt;
            &lt;/div&gt;  
            &lt;mat-option *ngFor="let name of group.names" [value]="name"
               [ngClass]="isExpandCategory ? 'list-show' : 'list-hide'"&gt;
              {{name}}
            &lt;/mat-option&gt;
    &lt;/mat-optgroup&gt;
  
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>After selected the values, it should look like below (+1 or 2.. other).</p>
  <p><a href="https://i.stack.imgur.com/hc6Fv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hc6Fv.jpg" alt="enter image description here" /></a></p>