fix(table): better error message if text column is missing a name

Currently if the consumer forgot to set a name on a text column, we throw a cryptic error somewhere down the line. These changes add a proper error message.

Author: crisbeto

src/cdk/table/table-errors.ts

@@ -64,3 +64,11 @@ export function getTableUnknownDataSourceError() {
 export function getTableTextColumnMissingParentTableError() {
   return Error(`Text column could not find a parent table for registration.`);
 }
+
+/**
+ * Returns an error to be thrown when a table text column doesn't have a name.
+ * @docs-private
+ */
+export function getTableTextColumnMissingNameError() {
+  return Error(`Table text column must have a name.`);
+}

src/cdk/table/text-column.spec.ts

@@ -1,7 +1,10 @@
 import {Component} from '@angular/core';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import {getTableTextColumnMissingParentTableError} from './table-errors';
+import {
+  getTableTextColumnMissingParentTableError,
+  getTableTextColumnMissingNameError,
+} from './table-errors';
 import {CdkTableModule} from './table-module';
 import {expectTableToMatchContent} from './table.spec';
 import {TEXT_COLUMN_OPTIONS, TextColumnOptions} from './text-column';
@@ -19,6 +22,7 @@ describe('CdkTextColumn', () => {
           declarations: [
             BasicTextColumnApp,
             MissingTableApp,
+            TextColumnWithoutNameApp,
           ],
         })
         .compileComponents();
@@ -45,6 +49,11 @@ describe('CdkTextColumn', () => {
         .toThrowError(getTableTextColumnMissingParentTableError().message);
   });
 
+  it('should throw an error if the text column does not have a name', () => {
+    expect(() => TestBed.createComponent(TextColumnWithoutNameApp).detectChanges())
+        .toThrowError(getTableTextColumnMissingNameError().message);
+  });
+
   it('should allow for alternate header text', () => {
     component.headerTextB = 'column-b';
     fixture.detectChanges();
@@ -182,3 +191,18 @@ class BasicTextColumnApp {
 })
 class MissingTableApp {
 }
+
+
+@Component({
+  template: `
+    <cdk-table [dataSource]="data">
+      <cdk-text-column [dataAccessor]="dataAccessorA"></cdk-text-column>
+
+      <cdk-header-row *cdkHeaderRowDef="displayedColumns"></cdk-header-row>
+      <cdk-row *cdkRowDef="let row; columns: displayedColumns"></cdk-row>
+    </cdk-table>
+  `
+})
+class TextColumnWithoutNameApp extends BasicTextColumnApp {
+}
+

src/cdk/table/text-column.ts

@@ -16,11 +16,15 @@ import {
   OnInit,
   Optional,
   ViewChild,
-  ViewEncapsulation
+  ViewEncapsulation,
+  isDevMode,
 } from '@angular/core';
 import {CdkCellDef, CdkColumnDef, CdkHeaderCellDef} from './cell';
 import {CdkTable} from './table';
-import {getTableTextColumnMissingParentTableError} from './table-errors';
+import {
+  getTableTextColumnMissingParentTableError,
+  getTableTextColumnMissingNameError,
+} from './table-errors';
 
 
 /** Configurable options for `CdkTextColumn`. */
@@ -164,11 +168,17 @@ export class CdkTextColumn<T> implements OnDestroy, OnInit {
    * has been provided. Otherwise simply capitalize the column name.
    */
   _createDefaultHeaderText() {
+    const name = this.name;
+
+    if (isDevMode() && !name) {
+      throw getTableTextColumnMissingNameError();
+    }
+
     if (this._options && this._options.defaultHeaderTextTransform) {
-      return this._options.defaultHeaderTextTransform(this.name);
+      return this._options.defaultHeaderTextTransform(name);
     }
 
-    return this.name[0].toUpperCase() + this.name.slice(1);
+    return name[0].toUpperCase() + name.slice(1);
   }
 
   /** Synchronizes the column definition name with the text column name. */