fix(toolbar): not picking up indirect descendant rows (#17469)

Fixes `mat-toolbar` not picking up rows that aren't direct descendants.

Author: crisbeto

src/material/toolbar/BUILD.bazel

@@ -51,6 +51,7 @@ ng_test_library(
     ),
     deps = [
         ":toolbar",
+        "@npm//@angular/common",
         "@npm//@angular/platform-browser",
     ],
 )

src/material/toolbar/toolbar.spec.ts

@@ -1,14 +1,20 @@
 import {Component} from '@angular/core';
 import {TestBed, async, ComponentFixture, fakeAsync, flush} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
+import {CommonModule} from '@angular/common';
 import {MatToolbarModule} from './index';
 
 describe('MatToolbar', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MatToolbarModule],
-      declarations: [ToolbarSingleRow, ToolbarMultipleRows, ToolbarMixedRowModes],
+      imports: [MatToolbarModule, CommonModule],
+      declarations: [
+        ToolbarSingleRow,
+        ToolbarMultipleRows,
+        ToolbarMixedRowModes,
+        ToolbarMultipleIndirectRows,
+      ],
     });
 
     TestBed.compileComponents();
@@ -84,6 +90,15 @@ describe('MatToolbar', () => {
         }
       }).toThrowError(/attempting to combine different/i);
     }));
+
+    it('should pick up indirect descendant rows', () => {
+      const fixture = TestBed.createComponent(ToolbarMultipleIndirectRows);
+      fixture.detectChanges();
+      const toolbar = fixture.nativeElement.querySelector('.mat-toolbar');
+
+      expect(toolbar.classList).toContain('mat-toolbar-multiple-rows');
+    });
+
   });
 
 });
@@ -121,3 +136,17 @@ class ToolbarMultipleRows {}
 class ToolbarMixedRowModes {
   showToolbarRow: boolean = true;
 }
+
+
+@Component({
+  // The ng-container is there so we have a node with a directive between the toolbar and the rows.
+  template: `
+    <mat-toolbar>
+      <ng-container [ngSwitch]="true">
+        <mat-toolbar-row>First Row</mat-toolbar-row>
+        <mat-toolbar-row>Second Row</mat-toolbar-row>
+      </ng-container>
+    </mat-toolbar>
+  `
+})
+class ToolbarMultipleIndirectRows {}

src/material/toolbar/toolbar.ts

@@ -56,7 +56,7 @@ export class MatToolbar extends _MatToolbarMixinBase implements CanColor, AfterV
   private _document: Document;
 
   /** Reference to all toolbar row elements that have been projected. */
-  @ContentChildren(MatToolbarRow) _toolbarRows: QueryList<MatToolbarRow>;
+  @ContentChildren(MatToolbarRow, {descendants: true}) _toolbarRows: QueryList<MatToolbarRow>;
 
   constructor(
     elementRef: ElementRef,