dtTrigger not working with Angular Datatable

Question

Angular Datatable is working fine, but When I include [dtTrigger]="dtTrigger" on table component then Datatable is getting removed from the table.

After removing [dtTrigger]="dtTrigger" from table it works as expected.

[dtTrigger]="dtTrigger" is needed to dynamically update data.

ts file is as follows,

import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { User } from '../user';
import { UserService } from '../user.service';
import { CommonModule } from '@angular/common';
import {RouterModule} from '@angular/router';
import { DataTablesModule } from 'angular-datatables';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [FormsModule,CommonModule, RouterModule, DataTablesModule],
  templateUrl: './user.component.html',
  styleUrl: './user.component.css'
})

export class UserComponent {
  userService: UserService = inject(UserService);
  formData = new FormData;
  users: User[] = [];
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();
  constructor(){
    this.userService.getUsers().subscribe(users=>{
      this.users = users;
    });
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true,
      };
  }
  async submit(f: NgForm) {
    var user: User = { name: f.value.name, email: f.value.email }
    await this.userService.upload(this.formData).subscribe(data => {
      user.photo = data.photo;
      this.userService.addLocation(user).subscribe()
      this.userService.getUsers().subscribe(users=>{
        this.users = users;
        f.resetForm()
      });
    });
  }
  upload(event: Event) {
    let element = (event.target as HTMLInputElement);
    let files = (element.files as FileList);
    this.formData.set('photo', files[0])
  }
}

and html in template is,

<form #f="ngForm" (submit)="submit(f)">
    <label for="name">Name:</label>
    <input id="name" type="text" name="name" ngModel><br><br>

    <label for="email">Email:</label>
    <input id="email" type="text" name="email" ngModel><br><br>

    <label for="photo">Photo:</label>
    <input id="photo" type="file" name="photo" (change)="upload($event)"><br><br>
    <button type="submit" class="primary">Add</button>
</form>
<table *ngIf = "users.length" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Photo</th>
            <th>Details</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let user of users">
            <td>
                {{user.name}}
            </td>
            <td>
                {{user.email}}
            </td>
            <td>
                <img height="100px" src="http://localhost:3000/{{user.photo}}">
            </td>
            <td>
                <a [routerLink]="['/details', user.id]">View</a>
            </td>
        </tr>
    </tbody>
</table>

Angular CLI version is 17, Node version is 20, NPM version is 10

Answer 1

Seems your users data are not fetch with the good way according official documentation for server side data rendering default config:

Try this in constructor to load user data in your html table:

this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 5,
processing: true,
serverSide: true,
ajax: (dataTablesParameters: any, callback) => {
    this.userService.getUsers().subscribe(users => {
        this.users = users;
        callback({
            recordsTotal: users.length,
            recordsFiltered: users.length,
            data: users
        });
    });
 },
};

Try using the same way to update user data in your html table.