I have two components: 1) Table.component 2) Dashboard.component
In the Dashboard component, I want to use the table template from the Table component. To do this, I declared a selector in the Table component as:
selector: '[tables-basic]',
Do I need to include anything else in the table.template?
I imported the Table component in the Dashboard module and declared the component name with the selector in the Dashboard component as:
<tables-basic></tables-basic>
However, I encountered an error:
1. If 'tables-basic' is an Angular component, then verify that it is part of this module.
2. If 'tables-basic' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (" <div id="tabs2c" class="tab-content bg-info-light">
<div id = "tab2">
[ERROR ->]<tables-basic></tables-basic>
</div>
<!--
Did I miss something? Can anyone please suggest help? Here is my UiElementsModule.ts file:
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AlertModule, TooltipModule } from 'ng2-bootstrap/ng2-bootstrap';
import { ButtonsModule, DropdownModule, PaginationModule } from 'ng2-bootstrap/ng2-bootstrap';
import { DataTableDirectives } from 'angular2-datatable/datatable';
import { Ng2TableModule } from 'ng2-table';
import { HttpModule } from '@angular/http';
import { WidgetModule } from '../layout/widget/widget.module';
import { UtilsModule } from '../layout/utils/utils.module';
import { JqSparklineModule } from '../components/sparkline/sparkline.module';
import 'parsleyjs';
// import { TablesBasic } from './basic/tables-basic.component';
import { TablesDynamic } from './dynamic/tables-dynamic.component';
import { SearchPipe } from './dynamic/pipes/search-pipe';
import { Ng2PaginationModule } from 'ng2-pagination';
export const routes = [
{ path: '', redirectTo: 'basic', pathMatch: 'full' },
// { path: 'basic', component: TablesBasic },
{ path: 'dynamic', component: TablesDynamic },
];
@NgModule({
declarations: [
// Components / Directives/ Pipes
DataTableDirectives,
// TablesBasic,
TablesDynamic,
SearchPipe
],
imports: [
CommonModule,
Ng2PaginationModule,
HttpModule,
ReactiveFormsModule,
JqSparklineModule,
FormsModule,
AlertModule,
TooltipModule,
ButtonsModule,
DropdownModule,
PaginationModule,
WidgetModule,
UtilsModule,
Ng2TableModule,
RouterModule.forChild(routes)
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export default class UiElementsModule {
static routes = routes;
}