CODEWITHSUNDEEP
angulartypescript
Arnold
Arnold

Reputation: 55

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

Upvotes: 1

Views: 1432

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

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.

Upvotes: 1

Related Questions