help (MatTextColumn): How to create custom column components like this one

[adwaer]

What are you trying to do?

I wanna create reusable columns for my tables

What troubleshooting steps have you tried?

I made copy of the MatTextColumn (with different name) https://github.com/angular/components/blob/master/src/material/table/text-column.ts
and it didn't work

_import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { MatTextColumn } from '@angular/material/table';

@component({
selector: 'app-table-column-order',
template: <ng-container matColumnDef> <th mat-header-cell *matHeaderCellDef [style.text-align]="justify"> {{ headerText }} </th> <td mat-cell *matCellDef="let data" [style.text-align]="justify"> {{ dataAccessor(data, name) }} </td> </ng-container>,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.Default,
// providers: [{ provide: TableColumnOrderComponent, useExisting: MatTextColumn }],
})
export class TableColumnOrderComponent extends MatTextColumn {}_

Reproduction

Steps to reproduce:

1. copy paste my compoent
2. use it somewhere inside table
   <app-table-column-order matColumnDef="position"></app-table-column-order>

Result:
_Exception with text: TypeError: Cannot read properties of undefined (reading 'template')
at MatHeaderRowDef.extractCellTemplate (table.js:482:1)
at table.js:1980:1
at Function.from ()
at MatTable._getCellTemplates (table.js:1975:1)
at MatTable._renderCellTemplateForItem (table.js:1940:1)
at MatTable._renderRow (table.js:1936:1)
at table.js:1857:1
at Array.forEach ()
at MatTable.forceRenderHeaderRows (table.js:1857:1)
at MatTable.ngAfterContentChecked (table.js:1501:1)

Expected: to see the data

Environment

• Angular: 12.2.5
• CDK/Material: 12.2.5
• Browser(s): Version 97.0.1072.62 (Official build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

You can check out how ours is set up try to mirror it, although it's not something we generally recommend since it might break if we change the internals. See https://github.com/angular/components/blob/master/src/material/table/text-column.ts

[adwaer]

@crisbeto it's not working, I made copy of that text-column, but it's not working

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}