I'm trying to use component TableComponent in AppInventoryModule
// app-inventory.component.html
...
<div class="table-container">
<mat-table [model]="tableModel"
(sortChange)="onSortChange($event)"
[dataSource]="data">
</mat-table>
</div>
...
TableComponent is an Angular component:
// src/ts/app/shared/components/table/table.component.ts
...
@Component({
selector: 'mat-table',
template: require('./table.component.html')
})
export class TableComponent<T> implements OnInit {
...
ngOnInit() {
console.log("hello!");
}
...
I registered it in the AppModule
// src/ts/modules/appModule/app.module.ts
@NgModule({
...
declarations: [
TableComponent,
...
],
entryComponents: [
TableComponent,
...
],
...
export class AppModule {
...
And added it into downgrade Module:
// src/ts/modules/appModule/app.module.downgrade.ts
const APP_MODULE_DOWNGRADABLES: Mapper[] = [
...
{
downgradeAs: 'directive',
entity: {
component: TableComponent
},
targetName: 'table'
},
...
];
Downgrade.downgradeEntities('AppUI', APP_MODULE_DOWNGRADABLES);
Now I'm using this Table component into AngularJS code:
// src/template/trails/expanded-table.html
<div class="table-container">
<mi-mat-table [model]="tableModel"
(sortChange)="onSortChange($event)"
[dataSource]="data">
</mi-mat-table>
</div>
But I got an error:
Error: Template parse errors:
Can't bind to 'model' since it isn't a known property of 'mat-table'.
1. If 'mat-table' is an Angular component and it has 'model' input, then verify that it is part of this module.
2. If 'mat-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (">
<div class="table-container">
<mat-table [ERROR ->][model]="tableModel"
(sortChange)="onSortChange($event)"
[data"):
ng:///AppInventoryModule/AppInventoryComponent.html@170:30
...
But I have already included the Table component into AppModule, don't know why it is not visible.
I've found the solution - I needed to remove TableComponent from the declarations in AppModule and leave it in the entryComponents:
// src/ts/modules/appModule/app.module.ts
...
declarations: [
// TableComponent,
...
],
entryComponents: [
TableComponent,
...
],
...
As well to update 'targetName: matTable':
// src/ts/modules/appModule/app.module.downgrade.ts
...
{
downgradeAs: 'directive',
entity: {
component: TableComponent
},
targetName: 'matTable'
},
...