fix(material/table): resolve local compilation issues

The Material table had a few places where it was importing a component's template as a string. This is incompatible with the upcoming local compilation mode in the compiler. These changes inline the templates instead.
angular · Aug 13, 2023 · 655fd3f · 655fd3f
1 parent 595b3da
commit 655fd3f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/src/material/table/row.ts b/src/material/table/row.ts
@@ -7,7 +7,6 @@
  */
 
 import {
-  CDK_ROW_TEMPLATE,
   CdkFooterRow,
   CdkFooterRowDef,
   CdkHeaderRow,
@@ -18,6 +17,9 @@ import {
 } from '@angular/cdk/table';
 import {ChangeDetectionStrategy, Component, Directive, ViewEncapsulation} from '@angular/core';
 
+// We can't reuse `CDK_ROW_TEMPLATE` because it's incompatible with local compilation mode.
+const ROW_TEMPLATE = `<ng-container cdkCellOutlet></ng-container>`;
+
 /**
  * Header row definition for the mat-table.
  * Captures the header row's template and other header properties such as the columns to display.
@@ -55,7 +57,7 @@ export class MatRowDef<T> extends CdkRowDef<T> {}
 /** Header template container that contains the cell outlet. Adds the right class and role. */
 @Component({
   selector: 'mat-header-row, tr[mat-header-row]',
-  template: CDK_ROW_TEMPLATE,
+  template: ROW_TEMPLATE,
   host: {
     'class': 'mat-mdc-header-row mdc-data-table__header-row',
     'role': 'row',
@@ -72,7 +74,7 @@ export class MatHeaderRow extends CdkHeaderRow {}
 /** Footer template container that contains the cell outlet. Adds the right class and role. */
 @Component({
   selector: 'mat-footer-row, tr[mat-footer-row]',
-  template: CDK_ROW_TEMPLATE,
+  template: ROW_TEMPLATE,
   host: {
     'class': 'mat-mdc-footer-row mdc-data-table__row',
     'role': 'row',
@@ -89,7 +91,7 @@ export class MatFooterRow extends CdkFooterRow {}
 /** Data row template container that contains the cell outlet. Adds the right class and role. */
 @Component({
   selector: 'mat-row, tr[mat-row]',
-  template: CDK_ROW_TEMPLATE,
+  template: ROW_TEMPLATE,
   host: {
     'class': 'mat-mdc-row mdc-data-table__row',
     'role': 'row',

diff --git a/src/material/table/table.ts b/src/material/table/table.ts
@@ -14,7 +14,6 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {
-  CDK_TABLE_TEMPLATE,
   CdkTable,
   _CoalescedStyleScheduler,
   _COALESCED_STYLE_SCHEDULER,
@@ -40,7 +39,17 @@ export class MatRecycleRows {}
 @Component({
   selector: 'mat-table, table[mat-table]',
   exportAs: 'matTable',
-  template: CDK_TABLE_TEMPLATE,
+  // Note that according to MDN, the `caption` element has to be projected as the **first**
+  // element in the table. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption
+  // We can't reuse `CDK_TABLE_TEMPLATE` because it's incompatible with local compilation mode.
+  template: `
+    <ng-content select="caption"></ng-content>
+    <ng-content select="colgroup, col"></ng-content>
+    <ng-container headerRowOutlet></ng-container>
+    <ng-container rowOutlet></ng-container>
+    <ng-container noDataRowOutlet></ng-container>
+    <ng-container footerRowOutlet></ng-container>
+  `,
   styleUrls: ['table.css'],
   host: {
     'class': 'mat-mdc-table mdc-data-table__table',