fix(tabs): server-side rendering error (#5348)

* Fixes an error that was being thrown by the tab header when using server-side rendering. * Fixes the `transform` potentially being set to an invalid value, if reading the scroll position fails (e.g. `translate3d(NaNpx, 0, 0)`).
angular · Jun 27, 2017 · 0174377 · 0174377
1 parent 1b351cd
commit 0174377
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 20 deletions.
diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts
@@ -21,6 +21,7 @@ import {
   AfterContentInit,
   OnDestroy,
   NgZone,
+  Renderer2,
 } from '@angular/core';
 import {
   RIGHT_ARROW,
@@ -136,6 +137,7 @@ export class MdTabHeader implements AfterContentChecked, AfterContentInit, OnDes
   constructor(
     private _elementRef: ElementRef,
     private _ngZone: NgZone,
+    private _renderer: Renderer2,
     @Optional() private _dir: Directionality) { }
 
   ngAfterContentChecked(): void {
@@ -299,12 +301,11 @@ export class MdTabHeader implements AfterContentChecked, AfterContentInit, OnDes
 
   /** Performs the CSS transformation on the tab list that will cause the list to scroll. */
   _updateTabScrollPosition() {
-    let translateX = this.scrollDistance + 'px';
-    if (this._getLayoutDirection() == 'ltr') {
-      translateX = '-' + translateX;
-    }
+    const scrollDistance = this.scrollDistance;
+    const translateX = this._getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance;
 
-    applyCssTransform(this._tabList.nativeElement, `translate3d(${translateX}, 0, 0)`);
+    this._renderer.setStyle(this._tabList.nativeElement, 'transform',
+        `translate3d(${translateX}px, 0, 0)`);
   }
 
   /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
@@ -317,7 +318,7 @@ export class MdTabHeader implements AfterContentChecked, AfterContentInit, OnDes
 
     this._checkScrollingControls();
   }
-  get scrollDistance(): number { return this._scrollDistance;  }
+  get scrollDistance(): number { return this._scrollDistance; }
 
   /**
    * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
@@ -413,7 +414,7 @@ export class MdTabHeader implements AfterContentChecked, AfterContentInit, OnDes
   _getMaxScrollDistance(): number {
     const lengthOfTabList = this._tabList.nativeElement.scrollWidth;
     const viewLength = this._tabListContainer.nativeElement.offsetWidth;
-    return lengthOfTabList - viewLength;
+    return (lengthOfTabList - viewLength) || 0;
   }
 
   /** Tells the ink-bar to align itself to the current label wrapper */

diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html
@@ -183,19 +183,17 @@ <h2>Slider</h2>
 <md-slider tickInterval="1" min="1" max="10" value="5" thumbLabel></md-slider>
 
 <h2>Tabs</h2>
-
-<!-- Tabs don't work because `_updateTabScrollPosition` tries to set the transform on start-up -->
-<!--<md-tab-group>-->
-  <!--<md-tab label="Overview">-->
-    <!--The overview-->
-  <!--</md-tab>-->
-  <!--<md-tab>-->
-    <!--<ng-template md-tab-label>-->
-      <!--API docs-->
-    <!--</ng-template>-->
-    <!--The API docs-->
-  <!--</md-tab>-->
-<!--</md-tab-group>-->
+<md-tab-group>
+  <md-tab label="Overview">
+    The overview
+  </md-tab>
+  <md-tab>
+    <ng-template md-tab-label>
+      API docs
+    </ng-template>
+    The API docs
+  </md-tab>
+</md-tab-group>
 
 <nav md-tab-nav-bar>
  <a md-tab-link href="https://google.com">Google</a>