perf(table): Do column name string interpolation once per column instead of once per cell (#19801)

* perf(table): Use only one column classname and do string interpolation once per column

* missed a couple

* lint

* update api

* For now, just share the css classname across cells, but keep same behavior.

* lint

* update api

(cherry picked from commit bf953e9)

Author: kseamon

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,40 @@ export class CdkColumnDef extends _CdkColumnDefBase implements CanStick {
    */
   cssClassFriendlyName: string;
 
+  /**
+   * Class name for cells in this column.
+   * @docs-private
+   */
+  _columnCssClassName: string[];
+
   constructor(@Inject(CDK_TABLE) @Optional() public _table?: any) {
     super();
   }
 
+  /**
+   * Overridable method that sets the css classes that will be added to every cell in this
+   * column.
+   * In the future, columnCssClassName will change from type string[] to string and this
+   * will set a single string value.
+   * @docs-private
+   */
+  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);
+    // If IE 11 is dropped before we switch to setting a single class name, change to multi param
+    // with destructuring.
+    const classList = elementRef.nativeElement.classList;
+    for (const className of columnDef._columnCssClassName) {
+      classList.add(className);
+    }
   }
 }
 

src/material-experimental/mdc-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,17 @@ export class MatColumnDef extends CdkColumnDef {
   /** Unique name for this column. */
   @Input('matColumnDef') name: string;
 
+  /**
+   * Add "mat-column-" prefix in addition to "cdk-column-" prefix.
+   * In the future, this will only add "mat-column-" and columnCssClassName
+   * will change from type string[] to string.
+   * @docs-private
+   */
+  protected _updateColumnCssClassName() {
+    super._updateColumnCssClassName();
+    this._columnCssClassName!.push(`mat-column-${this.cssClassFriendlyName}`);
+  }
+
   static ngAcceptInputType_sticky: BooleanInput;
 }
 
@@ -73,13 +84,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 +94,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 +104,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 {}

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,17 @@ export class MatColumnDef extends CdkColumnDef {
   /** Unique name for this column. */
   @Input('matColumnDef') name: string;
 
+  /**
+   * Add "mat-column-" prefix in addition to "cdk-column-" prefix.
+   * In the future, this will only add "mat-column-" and columnCssClassName
+   * will change from type string[] to string.
+   * @docs-private
+   */
+  protected _updateColumnCssClassName() {
+    super._updateColumnCssClassName();
+    this._columnCssClassName!.push(`mat-column-${this.cssClassFriendlyName}`);
+  }
+
   static ngAcceptInputType_sticky: BooleanInput;
 }
 
@@ -73,13 +84,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 +94,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 +104,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

@@ -89,6 +89,7 @@ export interface CdkCellOutletRowContext<T> {
 }
 
 export declare class CdkColumnDef extends _CdkColumnDefBase implements CanStick {
+    _columnCssClassName: string[];
     _name: string;
     _stickyEnd: boolean;
     _table?: any;
@@ -101,6 +102,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>;
 }