Arnold Arnold - 1 month ago 32
TypeScript Question

How to include directives in a template in angular2

I have 2 components,
1)Table.component
2)Dashboard.component

I want to use table template in dashboard component and for that i declared a selec tor in table component as

selector: '[tables-basic]',


Is there anything to include in table.template?

and i imported the table component in dashboard module and i declared the component name and put the selector in dashboard component as

<tables-basic></tables-basic>


But i got the error as

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>
<!--


Am i missed any thing.Can anyone please suggest help.
my uielement module.ts,

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;
}

Answer

Either change the selector to

selector: 'tables-basic',   

or the element to

 <div tables-basic></div tables-basic>

(where div can be any element)

selector: '[tables-basic]', is an attribute selector and requires a matching attribute not an element name.