From aa47c1f986409a7f222cb3ffd66a69ff5b41be36 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 22 Sep 2019 19:19:38 +0200
Subject: [PATCH] fix(material-experimental/mdc-tabs): error during server-side
 rendering

Fixes an error that is thrown by the ink bar, because it tries to call `getBoundingClientRect` on the server. Also sets up the kitchen sink test for the MDC-based tabs.
---
 src/material-experimental/mdc-tabs/ink-bar.ts |  3 ++-
 .../kitchen-sink-mdc/kitchen-sink-mdc.html    | 23 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/material-experimental/mdc-tabs/ink-bar.ts b/src/material-experimental/mdc-tabs/ink-bar.ts
index 59292899cd0c..a15dd06ab213 100644
--- a/src/material-experimental/mdc-tabs/ink-bar.ts
+++ b/src/material-experimental/mdc-tabs/ink-bar.ts
@@ -82,7 +82,8 @@ export class MatInkBarFoundation {
       this._indicatorContent.style.setProperty(propName, value);
     },
     computeContentClientRect: () => {
-      return this._destroyed ? {
+      // `getBoundingClientRect` isn't available on the server.
+      return this._destroyed || !this._indicatorContent.getBoundingClientRect ? {
         width: 0, height: 0, top: 0, left: 0, right: 0, bottom: 0
       } : this._indicatorContent.getBoundingClientRect();
     }
diff --git a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html
index 6f978529cdca..0d1c6616196a 100644
--- a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html
+++ b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html
@@ -55,3 +55,26 @@ <h2>Slider</h2>
 <mat-slider value="50"></mat-slider>
 <mat-slider tickInterval="1" min="1" max="10" value="5" thumbLabel></mat-slider>
 <mat-slider disabled></mat-slider>
+
+<h2>Tabs</h2>
+
+<!--
+  Note that we set the `selectedIndex` here to hit the code path
+  where we might need to do some measurements.
+-->
+<mat-tab-group [selectedIndex]="1">
+  <mat-tab label="Overview">
+    The overview
+  </mat-tab>
+  <mat-tab>
+    <ng-template mat-tab-label>
+      API docs
+    </ng-template>
+    The API docs
+  </mat-tab>
+</mat-tab-group>
+
+<nav mat-tab-nav-bar>
+ <a mat-tab-link href="https://google.com">Google</a>
+ <a mat-tab-link href="https://google.com" active>Also Google</a>
+</nav>