Observe projected toolbar rows

Author: devversion

src/lib/toolbar/toolbar.spec.ts

@@ -44,10 +44,6 @@ describe('MdToolbar', () => {
       expect(toolbarElement.classList.contains('mat-warn')).toBe(true);
     });
 
-    it('should set the toolbar role on the host', () => {
-      expect(toolbarElement.getAttribute('role')).toBe('toolbar');
-    });
-
     it('should not wrap the first row contents inside of a generated element', () => {
       expect(toolbarElement.firstElementChild!.tagName).toBe('SPAN',
           'Expected the <span> element of the first row to be a direct child of the toolbar');
@@ -70,6 +66,18 @@ describe('MdToolbar', () => {
         fixture.detectChanges();
       }).toThrowError(/attempting to combine different/i);
     });
+
+    it('should throw an error if a toolbar-row is added later', () => {
+      const fixture = TestBed.createComponent(ToolbarMixedRowModes);
+
+      fixture.componentInstance.showToolbarRow = false;
+      fixture.detectChanges();
+
+      expect(() => {
+        fixture.componentInstance.showToolbarRow = true;
+        fixture.detectChanges();
+      }).toThrowError(/attempting to combine different/i);
+    });
   });
 
 });
@@ -100,8 +108,10 @@ class ToolbarMultipleRows {}
   template: `
     <md-toolbar>
       First Row
-      <md-toolbar-row>Second Row</md-toolbar-row>
+      <md-toolbar-row *ngIf="showToolbarRow">Second Row</md-toolbar-row>
     </md-toolbar>
   `
 })
-class ToolbarMixedRowModes {}
+class ToolbarMixedRowModes {
+  showToolbarRow: boolean = true;
+}

src/lib/toolbar/toolbar.ts

@@ -58,12 +58,27 @@ export class MdToolbar extends _MdToolbarMixinBase implements CanColor, AfterVie
   }
 
   ngAfterViewInit() {
-    if (!isDevMode() || !this._platform.isBrowser || !this._toolbarRows.length) {
+    if (!isDevMode() || !this._platform.isBrowser) {
       return;
     }
 
+    this._checkToolbarMixedModes();
+    this._toolbarRows.changes.subscribe(() => this._checkToolbarMixedModes());
+  }
+
+  /**
+   * Throws an exception when developers are attempting to combine the different toolbar row modes.
+   */
+  private _checkToolbarMixedModes() {
+    if (!this._toolbarRows.length) {
+      return;
+    }
+
+    // Check if there are any other DOM nodes that can display content but aren't inside of
+    // a <md-toolbar-row> element.
     const isCombinedUsage = [].slice.call(this._elementRef.nativeElement.childNodes)
       .filter(node => !(node.classList && node.classList.contains('mat-toolbar-row')))
+      .filter(node => node.nodeType !== Node.COMMENT_NODE)
       .some(node => node.textContent.trim());
 
     if (isCombinedUsage) {