fix(select): options inside option group not being rendered when wrap…

…ped with ng-container (#9769)

Fixes the `mat-option` instances inside of a `mat-optgroup` not being rendered if they are wrapped inside of a `ng-container`.

Fixes #9736.

src/lib/core/option/optgroup.html

@@ -1,2 +1,2 @@
 <label class="mat-optgroup-label" [id]="_labelId">{{ label }}</label>
-<ng-content select="mat-option"></ng-content>
+<ng-content select="mat-option, ng-container"></ng-content>

src/lib/select/select.spec.ts

@@ -123,6 +123,7 @@ describe('MatSelect', () => {
         BasicSelect,
         MultiSelect,
         SelectWithGroups,
+        SelectWithGroupsAndNgContainer,
       ]);
     }));
 
@@ -991,6 +992,19 @@ describe('MatSelect', () => {
 
         expect(option.querySelectorAll('.mat-ripple-element').length).toBe(0);
       }));
+
+      it('should be able to render options inside groups with an ng-container', fakeAsync(() => {
+        fixture.destroy();
+
+        const groupFixture = TestBed.createComponent(SelectWithGroupsAndNgContainer);
+        groupFixture.detectChanges();
+        trigger = groupFixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+        trigger.click();
+        groupFixture.detectChanges();
+
+        expect(document.querySelectorAll('.cdk-overlay-container mat-option').length)
+            .toBeGreaterThan(0, 'Expected at least one option to be rendered.');
+      }));
     });
 
     describe('selection logic', () => {
@@ -4200,6 +4214,30 @@ class SelectWithGroups {
   @ViewChildren(MatOption) options: QueryList<MatOption>;
 }
 
+@Component({
+  selector: 'select-with-groups',
+  template: `
+    <mat-form-field>
+      <mat-select placeholder="Pokemon" [formControl]="control">
+        <mat-optgroup *ngFor="let group of pokemonTypes" [label]="group.name">
+          <ng-container *ngFor="let pokemon of group.pokemon">
+            <mat-option [value]="pokemon.value">{{ pokemon.viewValue }}</mat-option>
+          </ng-container>
+        </mat-optgroup>
+      </mat-select>
+    </mat-form-field>
+  `
+})
+class SelectWithGroupsAndNgContainer {
+  control = new FormControl();
+  pokemonTypes = [
+    {
+      name: 'Grass',
+      pokemon: [{ value: 'bulbasaur-0', viewValue: 'Bulbasaur' }]
+    }
+  ];
+}
+
 @Component({
   template: `
     <form>