typescript - "No data available in table " in angular while using bootstrap datatables

Question

i working on employee management system project in angualar,where i fetch all the employee details in datables from the database,but also i getting the messsage at the bottom of datatables "No data available in table".i searched it on google but did'nt get any solution.

Here is my componant.ts file code

import { Component,OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { AuthService } from '../../../services/auth.service';


@Component({
  selector: 'app-totaljoining',
  templateUrl: './totaljoining.component.html',
  styleUrls: ['./totaljoining.component.css']
})
export class TotaljoiningComponent implements OnInit {
   data:any;

   dtOptions: DataTables.Settings = {};

   constructor( public router: Router , private authService : AuthService) { }

  ngOnInit(): void {
    this.authService.getverifiedusers().subscribe(
      res => {
        this.data = res['data'];
      });

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      lengthMenu : [5, 10, 25],
      processing: true,
    };
  }

}

**And here is my html code

<div class="row">
  <div class="col-lg-12">
    <div class="card">
      <div class="card-header bg-primary">
        <i class="fa fa-align-justify"></i> Combined All Table
      </div>
      <div class="card-body">
        <table
          class="table table-bordered table-responsive-sm table-hover"
          datatable
          [dtOptions]="dtOptions"
        >
          <thead>
            <tr>
              <th>Name</th>
              <th>Email-ID</th>
              <th>Verified</th>
              <th>Sponsor ID</th>
              <th>Contact No</th>
              <th>View</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of data">
              <td>{{ data.users_name }}</td>
              <td>{{ data.users_email }}</td>
              <td>{{ data.users_verification }}</td>
              <td>{{ data.users_APID }}</td>
              <td>{{ data.users_contact_number }}</td>
              <td>
                <button
                  type="button"
                  class="btn btn-primary"
                  [routerLink]="['../user-details']"
                >
                  View
                </button>
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th>Name</th>
              <th>Email-ID</th>
              <th>Status</th>
              <th>Sponsor ID</th>
              <th>Contact No</th>
              <th>View</th>
            </tr>
          </tfoot>
        </table>
      </div>
</div>
</div>
<!--/.col-->
</div>

question from:https://stackoverflow.com/questions/66061669/no-data-available-in-table-in-angular-while-using-bootstrap-datatables

Answer 1

Waitting for answers