cant use ctable inside a coreUI component in angular

Question

I'm using coreUI to make a admin dashboard. I've downloaded coreui, installed the project and dipendences. Ok, I'd like to make a new page into the dashboard.

I've execute the command: ng generate component catalogue.

in my catalogue.component.ts I have:

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

@Component({
  selector: 'app-catalogue',
  templateUrl: './catalogue.component.html',
  styleUrls: ['./catalogue.component.scss']
})
export class CatalogueComponent implements OnInit {
  catalogueItems: any[] = [
    { name: "Prodotto 1", description: "Descrizione prodotto 1", price: "10€",availability: "Disponibile", image: "https://picsum.photos/200/300", moreActions:["sfilettato","intero"] },
    { name: "Prodotto 2", description: "Descrizione prodotto 2", price: "20€",availability: "Disponibile", image: "https://picsum.photos/200/300", moreActions:["sfilettato","intero"] },
    { name: "Prodotto 3", description: "Descrizione prodotto 3", price: "30€",availability: "Non Disponibile", image: "https://picsum.photos/200/300", moreActions:["intero"] },
  ];


  constructor() {}

  ngOnInit(): void {}

}

this is my html:

<app-dashboard>
    <table  [striped]="true" ctable>
        <thead>
          <tr>
            <th>Nome</th>
            <th>Descrizione</th>
            <th>Prezzo</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of catalogueItems">
            <td>{{ item.name }}</td>
            <td>{{ item.description }}</td>
            <td>{{ item.price }}</td>
          </tr>
        </tbody>
      </table>
</app-dashboard>

and that is in the app.module.ts:

import { CatalogueComponent } from './catalogue/catalogue.component';

const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true,
};
@NgModule({
  declarations: [AppComponent, ...APP_CONTAINERS, CatalogueComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
...

my actual problem is that once i go to the catalogue:

{
    path: 'catalogue',
    component: CatalogueComponent,
    data: {
      title: 'Catalogue'
    }

the page gives me this error:

error NG8002: Can't bind to 'striped' since it isn't a known property of 'table'.

2     <table  [striped]="true" ctable>

If i remove the striped attribute, then the table is shown, but is just like a normal html table, is not a ctable.

Anyone can lead me in the right direction with this?

Thanks in Advance.

Answer 1

If you are using the free template for CoreUI, try going to the "app.module.ts" and adding the TableModule to the imports. For some reason, when you get the repo, it is not there by default:

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    AvatarModule,
    BreadcrumbModule,
    FooterModule,
    DropdownModule,
    GridModule,
    HeaderModule,
    SidebarModule,
    IconModule,
    NavModule,
    ButtonModule,
    FormModule,
    UtilitiesModule,
    ButtonGroupModule,
    ReactiveFormsModule,
    SidebarModule,
    SharedModule,
    TabsModule,
    ListGroupModule,
    ProgressModule,
    BadgeModule,
    ListGroupModule,
    CardModule,
    NgScrollbarModule,
    HttpClientModule,
    TableModule, //add this for table directives
  ],
  providers: [