Extends MatTable

[ThiagoMarra]

Bug, feature request, or proposal:

Extends MatTable to inject any service;

What is the expected behavior?

--/--

What is the current behavior?

When i do,
export class MyTableComponent<T> extends MatTable<T> { };

I get the error:

Cannot read property 'viewContainer' of undefined

I think, injection is not working properly;

What are the steps to reproduce?

--/--

What is the use-case or motivation for changing an existing behavior?

for control, and to insert some services;

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular Material: 6.4.7;
TypeScript: 3.0.1;
Browser: none effect;

Is there anything else we should know?

--//--.

[devversion]

Are you using ES2015? If so, seems to be related to #12759. Read more about the issue: #12760

[ThiagoMarra]

i use es5.

my error is in this snippet of code:

if (this._headerRowOutlet.viewContainer.length > 0) {
this._headerRowOutlet.viewContainer.clear();
}

where my this._headerRowOutlet is always undefined.

i update to es6, but i get another issues, so i still in the es5.

[devversion]

@ThiagoMarra Would you be able to share more information? How do you use the extended table component?

[ThiagoMarra]

Okay , I created:

@Component({
 // tslint:disable-next-line:component-selector
 selector: 'my-table, table[my-table]',
 exportAs: 'myTable',
 template: CDK_TABLE_TEMPLATE,
 // tslint:disable-next-line:use-host-property-decorator
 host: {
   'class': 'mat-table',
 },
 encapsulation: ViewEncapsulation.None,
 changeDetection: ChangeDetectionStrategy.OnPush,
})
// tslint:disable-next-line:component-class-suffix
export class MyTableComponent<T> extends MatTable<T> {}

after that I used in my html like this:

<my-table [dataSource]="objectDatasource" class="mat-elevation-z8">
...
</my-table>

when a run I get the error: Cannot read property 'viewContainer' of undefined

in my debug I see that the this._headerRowOutlet is always undefined.

[devversion]

@ThiagoMarra I've set up a test project and was able to reproduce your issue.

Since the template of the component for the MyTableComponent is using the CDK_TABLE_TEMPLATE that refers to directives which are declared in your module, the @ViewChild for _headerRowOutlet etc won't reference anything.

If you add the CdkTableModule to your NgModule that contains the custom table component, it will work as expected.

[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.}