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,