CODEWITHSUNDEEP
angular
user11352561
user11352561

Reputation: 2647

Angular - 'ngx-caption' is not a known element in Angular-12 ngx-datatable

In my Angular-12, I have two modules: AppModule and AdminModule. I am using:

"@swimlane/ngx-datatable": "^19.0.0",

for datatable.

app.module:

import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import {AdminModule} from './features/admin/admin.module';

imports: [
  BrowserModule,
  AppRoutingModule,
  AdminModule,
  NgxDatatableModule
],

admin.module:

import { AboutUsComponent } from './pages/about-us/about-us.component';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@NgModule({
  declarations: [
    AboutUsComponent,
  ],
  imports: [
    CommonModule,
    AdminRoutingModule,
    LayoutModule,
    NgxDatatableModule
  ]
})

AboutUsComponent is inside admin.module:

about-us.component:

import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-about-us',
  templateUrl: './about-us.component.html',
  styleUrls: ['./about-us.component.scss']
})
export class AboutUsComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {}

}
<ngx-datatable tableClass="table table-striped table-bordered table-hover" [tableId]="'basic1'" [data]="dataWithCaption" [options]="optionsWithCaption" [columns]="columnsWithCaption">
  <ngx-caption>
    <div class="row">
      <div class="col-sm-12 col-xs-12 col-12 ">
        <b>
                  <i class="fa fa-table" aria-hidden="true"></i>
                  Basic Data Table List
                </b>
      </div>
    </div>
  </ngx-caption>
</ngx-datatable>

I got this error:

'ngx-caption' is not a known element:

  1. If 'ngx-caption' is an Angular component, then verify that it is part of this module.
  2. If 'ngx-caption' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to supp

ngx-caption is highlighted.

How do I get it resolved?

Thanks

ngx-caption

Upvotes: 0

Views: 930

Answers (1)

Drashti Dobariya
Drashti Dobariya

Reputation: 3006

This is a module mismatch.

You are using @swimlane/ngx-datatable.

While in the stackblitz link that you provided, @tusharghoshbd/ngx-datatable is used.

Install @tusharghoshbd/ngx-datatable - npm install @tusharghoshbd/ngx-datatable Then import it into admin module - import { NgxDatatableModule } from '@tusharghoshbd/ngx-datatable';

Upvotes: 1

Related Questions