fix(menu,toolbar): avoid potential server-side rendering errors

Avoids a couple of potential server-side rendering errors due to the menu item and toolbar components referring to the `Node` global variable directly.

Author: crisbeto

src/lib/menu/menu-item.ts

@@ -13,6 +13,7 @@ import {
   ElementRef,
   OnDestroy,
   ViewEncapsulation,
+  Inject,
 } from '@angular/core';
 import {
   CanDisable,
@@ -21,6 +22,7 @@ import {
   mixinDisableRipple
 } from '@angular/material/core';
 import {Subject} from 'rxjs/Subject';
+import {DOCUMENT} from '@angular/common';
 
 // Boilerplate for applying mixins to MatMenuItem.
 /** @docs-private */
@@ -55,6 +57,8 @@ export const _MatMenuItemMixinBase = mixinDisableRipple(mixinDisabled(MatMenuIte
 export class MatMenuItem extends _MatMenuItemMixinBase
     implements FocusableOption, CanDisable, CanDisableRipple, OnDestroy {
 
+  private _document: Document;
+
   /** Stream that emits when the menu item is hovered. */
   _hovered: Subject<MatMenuItem> = new Subject();
 
@@ -64,8 +68,11 @@ export class MatMenuItem extends _MatMenuItemMixinBase
   /** Whether the menu item acts as a trigger for a sub-menu. */
   _triggersSubmenu: boolean = false;
 
-  constructor(private _elementRef: ElementRef) {
+  constructor(private _elementRef: ElementRef, @Inject(DOCUMENT) document?: any) {
     super();
+
+    // TODO: make the document a required param when doing breaking changes.
+    this._document = document;
   }
 
   /** Focuses the menu item. */
@@ -105,6 +112,7 @@ export class MatMenuItem extends _MatMenuItemMixinBase
   /** Gets the label to be used when determining whether the option should be focused. */
   getLabel(): string {
     const element: HTMLElement = this._elementRef.nativeElement;
+    const textNodeType = this._document ? this._document.TEXT_NODE : 3;
     let output = '';
 
     if (element.childNodes) {
@@ -114,7 +122,7 @@ export class MatMenuItem extends _MatMenuItemMixinBase
       // We skip anything that's not a text node to prevent the text from
       // being thrown off by something like an icon.
       for (let i = 0; i < length; i++) {
-        if (element.childNodes[i].nodeType === Node.TEXT_NODE) {
+        if (element.childNodes[i].nodeType === textNodeType) {
           output += element.childNodes[i].textContent;
         }
       }

src/lib/toolbar/toolbar.ts

@@ -15,10 +15,12 @@ import {
   ElementRef,
   isDevMode,
   QueryList,
-  ViewEncapsulation
+  ViewEncapsulation,
+  Inject,
 } from '@angular/core';
 import {CanColor, mixinColor} from '@angular/material/core';
 import {Platform} from '@angular/cdk/platform';
+import {DOCUMENT} from '@angular/common';
 
 // Boilerplate for applying mixins to MatToolbar.
 /** @docs-private */
@@ -51,12 +53,19 @@ export class MatToolbarRow {}
   preserveWhitespaces: false,
 })
 export class MatToolbar extends _MatToolbarMixinBase implements CanColor, AfterViewInit {
+  private _document: Document;
 
   /** Reference to all toolbar row elements that have been projected. */
   @ContentChildren(MatToolbarRow) _toolbarRows: QueryList<MatToolbarRow>;
 
-  constructor(elementRef: ElementRef, private _platform: Platform) {
+  constructor(
+    elementRef: ElementRef,
+    private _platform: Platform,
+    @Inject(DOCUMENT) document?: any) {
     super(elementRef);
+
+    // TODO: make the document a required param when doing breaking changes.
+    this._document = document;
   }
 
   ngAfterViewInit() {
@@ -80,7 +89,7 @@ export class MatToolbar extends _MatToolbarMixinBase implements CanColor, AfterV
     // a <mat-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)
+      .filter(node => node.nodeType !== (this._document ? this._document.COMMENT_NODE : 8))
       .some(node => node.textContent.trim());
 
     if (isCombinedUsage) {