Angular 7 - Add a datatables to the component

Question

I am using this datatable: Angular Datatables

I followed the stripe of the examples cited on the site, but the datatable does not appear (does not load), only the html table appears on the screen.

Does anyone know how to solve this? Because it seems so simple in the site examples that I didn’t think I would go through so much trouble.

Code below: PS: When I take the command "[dtOptions]="dtOptions" [dtTrigger]="dtTrigger"" from the table, ai displays the component.

<h4 class="m-3"> Modulos</h4>
<nav class="nav">
    <button class="btn btn-success m-3" [routerLink]="['new']">Criar Módulo</button>
</nav>
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-light mx-3 text-secondary">
  <thead class="thead-light">
    <tr>
      <th>ID</th>
      <th>Nome</th>
      <th>Descrição</th>
      <th>Sistema</th>
      <th>Setor</th>
      <th>Modulo Pai</th>
      <th>Ações</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let m of modulos">
      <th>{{ m.id_modulo }}</th>
      <th>{{ m.nome_modulo }}</th>
      <th>{{ m.descricao }}</th>
      <th>{{ m.nome_sistema }}</th>
      <th>{{ m.nome_setor }}</th>
      <th>{{ m.nome_modulo_pai }}</th>
      <th><button class="btn btn-sm btn-info mr-2" [routerLink]="[m.id_modulo, 'edit']">Editar</button>
        <button class="btn btn-sm btn-danger" (click)="onDelete(m.id_modulo)">Deletar</button>
      </th>
    </tr>
  </tbody>
</table>

<ng-template #deleteModal>
  <div class="modal-body text-center">
    <p>Tem certeza que quer deletar?</p>
    <button type="button" class="btn btn-default" (click)="onConfirmDelete()">Sim</button>
    <button type="button" class="btn btn-primary" (click)="onDeclineDelete()">Não</button>
  </div>
</ng-template>

import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { Router } from "@angular/router";
import { Subject } from 'rxjs';

import { Modulos } from '../../interface/modulos';
import { ModulosService } from '../../services/modulos.service';

@Component({
  selector: 'app-modulo',
  templateUrl: './modulos.component.html',
  styleUrls: ['./modulos.component.css']
})
export class ModulosComponent implements OnDestroy, OnInit {

  public modulos: Modulos[];
  deleteModalRef: BsModalRef;
  deleteId: number;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();

  @ViewChild('deleteModal') deleteModal;

  constructor(private modulosService: ModulosService,
              private bsModalService: BsModalService,
              private router: Router) { }

  ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2
    };

    this.getList();
  }

  getList() {
    this.modulosService.getList().subscribe(
      (modulos: Modulos[]) => {this.modulos = modulos; this.dtTrigger.next();},
      (error) => {console.log(error); }
    );
  }
  ngOnDestroy(): void {
    // Do not forget to unsubscribe the event
    this.dtTrigger.unsubscribe();

  }
  onDelete(id: number) {
    this.deleteId = id;
    this.deleteModalRef = this.bsModalService.show(this.deleteModal, {class: 'modal-sm'});
  }
  onConfirmDelete() {
    this.delete(this.deleteId);
    this.deleteModalRef.hide();
  }
  onDeclineDelete() {
    this.deleteModalRef.hide();
  }
  private delete(id: number) {
    this.modulosService.delete(id).subscribe(
      (response) => {console.log(response); this.getList(); },
      (error) => {console.log(error); }
    );
  }
}

Error that appears:

In the app.module Datatables is imported

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ModalModule, BsModalRef } from 'ngx-bootstrap/modal';
import { BsDropdownModule } from 'ngx-bootstrap';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { DataTablesModule } from 'angular-datatables';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { MainComponent } from './main/main.component';

@NgModule({
   declarations: [
      AppComponent,
      MainComponent
   ],
   imports: [
      AppRoutingModule,
      BrowserModule,
      BsDropdownModule.forRoot(),
      CommonModule,
      DataTablesModule,
      FormsModule,
      HttpClientModule,
      ModalModule.forRoot(),
      NgbModule
   ],
   providers: [
      BsModalRef
   ],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

Version of Datatables: 6.9.0 Version of Jquery: 6.9.0

Answer 1

I saw the code and it seems to me Moduloscomponent is not a component of Appmodule, that is, its component is linked to the other module. Realize the import of Datatablesmodule in the module Modulosmodule and perform the test again.

Angular has a very specific encapsulation, the components imported by that module can only use the Imports of that module.

It would be right to work with a Shared, which performs the import of these modules reused in other points of the application, follows reference of the Angular documentation on the subject: Sharing Modules

Answer 2

You have an import error involving dtOptions.

Can’t bind to 'dtOptions' Since it isn’t a know Property of 'table'.

Unable to apply dtOptions as it is not a known table property'.

Check that the corresponding module is being imported correctly in @NgModule.