perf(table): Use only one column classname and do string interpolatio…

src/cdk/table/cell.ts

@@ -79,6 +79,7 @@ export class CdkColumnDef extends _CdkColumnDefBase implements CanStick {
     if (name) {
       this._name = name;
       this.cssClassFriendlyName = name.replace(/[^a-z0-9_-]/ig, '-');
+      this.updateColumnCssClassName();
     }
   }
   _name: string;
@@ -115,19 +116,31 @@ export class CdkColumnDef extends _CdkColumnDefBase implements CanStick {
    */
   cssClassFriendlyName: string;
 
+  /**
+   * Class name for cells in this column.
+   */
+  columnCssClassName: string;
+
   constructor(@Inject(CDK_TABLE) @Optional() public _table?: any) {
     super();
   }
 
+  /**
+   * Overridable method that sets the css class that will be added to every cell in this
+   * column.
+   */
+  protected updateColumnCssClassName() {
+    this.columnCssClassName = `cdk-column-${this.cssClassFriendlyName}`;
+  }
+
   static ngAcceptInputType_sticky: BooleanInput;
   static ngAcceptInputType_stickyEnd: BooleanInput;
 }
 
 /** Base class for the cells. Adds a CSS classname that identifies the column it renders in. */
 export class BaseCdkCell {
   constructor(columnDef: CdkColumnDef, elementRef: ElementRef) {
-    const columnClassName = `cdk-column-${columnDef.cssClassFriendlyName}`;
-    elementRef.nativeElement.classList.add(columnClassName);
+    elementRef.nativeElement.classList.add(columnDef.columnCssClassName);
   }
 }
 

src/material/table/cell.ts

@@ -7,7 +7,7 @@
  */
 
 import {BooleanInput} from '@angular/cdk/coercion';
-import {Directive, ElementRef, Input} from '@angular/core';
+import {Directive, Input} from '@angular/core';
 import {
   CdkCell,
   CdkCellDef,
@@ -62,6 +62,11 @@ export class MatColumnDef extends CdkColumnDef {
   /** Unique name for this column. */
   @Input('matColumnDef') name: string;
 
+  /** Override "cdk-column-" prefix. */
+  protected updateColumnCssClassName() {
+    this.columnCssClassName = `mat-column-${this.cssClassFriendlyName}`;
+  }
+
   static ngAcceptInputType_sticky: BooleanInput;
 }
 
@@ -73,13 +78,7 @@ export class MatColumnDef extends CdkColumnDef {
     'role': 'columnheader',
   },
 })
-export class MatHeaderCell extends CdkHeaderCell {
-  constructor(columnDef: CdkColumnDef,
-              elementRef: ElementRef<HTMLElement>) {
-    super(columnDef, elementRef);
-    elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`);
-  }
-}
+export class MatHeaderCell extends CdkHeaderCell {}
 
 /** Footer cell template container that adds the right classes and role. */
 @Directive({
@@ -89,13 +88,7 @@ export class MatHeaderCell extends CdkHeaderCell {
     'role': 'gridcell',
   },
 })
-export class MatFooterCell extends CdkFooterCell {
-  constructor(columnDef: CdkColumnDef,
-              elementRef: ElementRef) {
-    super(columnDef, elementRef);
-    elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`);
-  }
-}
+export class MatFooterCell extends CdkFooterCell {}
 
 /** Cell template container that adds the right classes and role. */
 @Directive({
@@ -105,10 +98,4 @@ export class MatFooterCell extends CdkFooterCell {
     'role': 'gridcell',
   },
 })
-export class MatCell extends CdkCell {
-  constructor(columnDef: CdkColumnDef,
-              elementRef: ElementRef<HTMLElement>) {
-    super(columnDef, elementRef);
-    elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`);
-  }
-}
+export class MatCell extends CdkCell {}

tools/public_api_guard/cdk/table.d.ts

@@ -79,6 +79,7 @@ export declare class CdkColumnDef extends _CdkColumnDefBase implements CanStick
     _stickyEnd: boolean;
     _table?: any;
     cell: CdkCellDef;
+    columnCssClassName: string;
     cssClassFriendlyName: string;
     footerCell: CdkFooterCellDef;
     headerCell: CdkHeaderCellDef;
@@ -87,6 +88,7 @@ export declare class CdkColumnDef extends _CdkColumnDefBase implements CanStick
     get stickyEnd(): boolean;
     set stickyEnd(v: boolean);
     constructor(_table?: any);
+    protected updateColumnCssClassName(): void;
     static ngAcceptInputType_sticky: BooleanInput;
     static ngAcceptInputType_stickyEnd: BooleanInput;
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<CdkColumnDef, "[cdkColumnDef]", never, { "sticky": "sticky"; "name": "cdkColumnDef"; "stickyEnd": "stickyEnd"; }, {}, ["cell", "headerCell", "footerCell"]>;

tools/public_api_guard/material/table.d.ts

@@ -1,5 +1,4 @@
 export declare class MatCell extends CdkCell {
-    constructor(columnDef: CdkColumnDef, elementRef: ElementRef<HTMLElement>);
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatCell, "mat-cell, td[mat-cell]", never, {}, {}, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatCell, never>;
 }
@@ -11,13 +10,13 @@ export declare class MatCellDef extends CdkCellDef {
 
 export declare class MatColumnDef extends CdkColumnDef {
     name: string;
+    protected updateColumnCssClassName(): void;
     static ngAcceptInputType_sticky: BooleanInput;
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatColumnDef, "[matColumnDef]", never, { "sticky": "sticky"; "name": "matColumnDef"; }, {}, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatColumnDef, never>;
 }
 
 export declare class MatFooterCell extends CdkFooterCell {
-    constructor(columnDef: CdkColumnDef, elementRef: ElementRef);
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatFooterCell, "mat-footer-cell, td[mat-footer-cell]", never, {}, {}, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatFooterCell, never>;
 }
@@ -39,7 +38,6 @@ export declare class MatFooterRowDef extends CdkFooterRowDef {
 }
 
 export declare class MatHeaderCell extends CdkHeaderCell {
-    constructor(columnDef: CdkColumnDef, elementRef: ElementRef<HTMLElement>);
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatHeaderCell, "mat-header-cell, th[mat-header-cell]", never, {}, {}, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatHeaderCell, never>;
 }