Rendering issue with angular-datatables

I'm having a problem with the rendering of my datatable. I'm using this Angular Datatables library, and I want the table to rerender when i search for an element (the search functionality is not datatable's own, it is my own search). The info is displaying correctly, but it is lacking styling. I have found that, when i delete the [dtTrigger] option in the datatable, it displays the datatable correctly but the search functionality is not working. When I add the [dtTrigger] option, the table is displayed with a weird styling (seems like plain HTML) and the search functionality is working correctly.

This is the datatable with correct functionality (search works) but incorrect display Datatable with correct functionality but incorrect display

This is the datatable with incorrect functionality (search DOESNT work) but correct display Datatable with incorrect functionality but correct display

Here is my code

client-component.ts

export class ClientListComponent implements OnInit, OnDestroy, AfterViewInit {

@ViewChild(DataTableDirective, {static: false})
// @ts-ignore
dtElement: DataTableDirective;

clients: Client[] = [];
dtOptions: Config = {};
dtTrigger: Subject<any> = new Subject();

constructor(
private clientService: ClientService,
private cdr: ChangeDetectorRef
) {
}

ngOnInit(): void {
this.dtOptions = {
destroy: true,
pagingType: 'full_numbers',
language: {
url: 'assets/i18n/Spanish.json'
},
columns: [
{ name: 'name' },
{ name: 'documentType' },
{ name: 'documentNumber' },
{ name: 'email' },
{ name: 'status' }
]
};

this.loadClients();
this.dtTrigger.next(null);
}

ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}

ngAfterViewInit(): void {
this.dtTrigger.next(false);

this.dtElement.dtInstance.then((dtInstance => {
$('#name').on('keyup', function () {
const value = (this as HTMLInputElement).value;
dtInstance.column('name:name').search(value).draw();
});

$('#document_number').on('keyup', function () {
const value = (this as HTMLInputElement).value;
dtInstance.column('documentNumber:name').search(value).draw();
});

$('#allButton').on('click', function () {
dtInstance.column('status:name').search('').draw();
});

$('#activeButton').on('click', function () {
dtInstance.column('status:name').search('Activo').draw();
});

$('#inactiveButton').on('click', function () {
dtInstance.column('status:name').search('Inactivo').draw();
});
}))
}


onSearch(status?: string): void{
const nameValue = (document.getElementById('name') as HTMLInputElement).value;
const documentNumberValue = (document.getElementById('document_number') as HTMLInputElement).value;

const response = this.clientService.getClients(
documentNumberValue ? parseInt(documentNumberValue, 10) : undefined,
nameValue,
status !== 'Todos' ? status : undefined
).
subscribe(response => {
this.clients = response.data;
this.rerender();
})
}

loadClients(): void {
this.clientService.getClients().subscribe(response => {
this.clients = response.data;
this.dtTrigger.next(null)
})
}

rerender(): void {
this.dtElement.dtInstance.then((dtInstance) => {
dtInstance.destroy();
this.dtTrigger.next(null);
})
}

}


client-component.html

<c-row>
<c-col class="">
<c-card class="mb-4">
<c-card-header>
<strong>Lista de clientes </strong></c-card-header>
<c-card-body>

<form>
<div class="container mb-4">
<div class="row">
<div class="col">
<label for="name" class="form-label text-start">Nombre de Cliente</label>
<input type="text" class="form-control" id="name" placeholder="Buscar por nombre">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for="document_number" class="form-label text-start"> Nro de documento </label>
<input type="text" class="form-control" id="document_number" placeholder="Buscar por documento">
</div>
<div class="col mt-4 pt-2">
<c-button-group aria-label="sample" role="group" id="stateInput">
<button cButton color="secondary" id="allButton">Todos</button>
<button cButton color="secondary" id="activeButton">Activo</button>
<button cButton color="primary" id="inactiveButton">Inactivo</button>
</c-button-group>
</div>
</div>
<div class="row mt-4">
<div class="col">
<button type="button" class="btn btn-primary"
(click)="onSearch()">Buscar</button>
</div>
</div>
</div>
</form>

<div >
<table
datatable
*ngIf="clients.length > 0"
[dtOptions]="dtOptions"
class="row-border hover">
<thead>
<tr>
<th>Nombre de cliente</th>
<th>Tipo de Documento</th>
<th>Nro Documento</th>
<th>Email</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let client of clients">
<td>{{client.name}}</td>
<td>{{client.document_type.name}}</td>
<td>{{client.document_number}}</td>
<td>{{client.email}}</td>
<td>{{client.document_type.active}}</td>
</tr>
</tbody>
</table>
</div>

</c-card-body>
</c-card>
</c-col>
</c-row>




Thanks in advance! I've spent a couple hours trying to find out what is going on here :/

I expected to see the correctly displayed datatable, but I'm seeing what appears to be a plain HTML datatable.

Continue reading...