diff --git a/src/material/toolbar/BUILD.bazel b/src/material/toolbar/BUILD.bazel
index b29966fe62b9..42d6c75171f1 100644
--- a/src/material/toolbar/BUILD.bazel
+++ b/src/material/toolbar/BUILD.bazel
@@ -51,6 +51,7 @@ ng_test_library(
),
deps = [
":toolbar",
+ "@npm//@angular/common",
"@npm//@angular/platform-browser",
],
)
diff --git a/src/material/toolbar/toolbar.spec.ts b/src/material/toolbar/toolbar.spec.ts
index 082bb5e29ed7..cbac3379fe63 100644
--- a/src/material/toolbar/toolbar.spec.ts
+++ b/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: `
+
+
+ First Row
+ Second Row
+
+
+ `
+})
+class ToolbarMultipleIndirectRows {}
diff --git a/src/material/toolbar/toolbar.ts b/src/material/toolbar/toolbar.ts
index 745a95051672..afda683ced42 100644
--- a/src/material/toolbar/toolbar.ts
+++ b/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;
+ @ContentChildren(MatToolbarRow, {descendants: true}) _toolbarRows: QueryList;
constructor(
elementRef: ElementRef,