Trying to implement datatables in Oshop Project

Angular
1

Hi, I am using the latest angular version 16 and trying to implement pagination and sorting using angular datatables.

admin-product.component.html

<p>
    <a routerLink="/admin/products/new" class="btn btn-primary"> New Product</a>
</p>

<table datatable [dtOptions]="dtOptions" class="row-border hover">
    <thead>
        <tr>
            <th>Title</th>
            <th>Price</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let p of products">
            <td>{{ p.data.title }}</td>
            <td>{{ p.data.price }}</td>
            <td>
                <a [routerLink]="['/admin/products/', p.key]">Edit</a>
            </td>
        </tr>
    </tbody>
</table>

admin-product.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { DataTablesResponse } from 'src/app/dataTables-response.model';
import { Product } from 'src/app/modules/product';
import { ProductService } from 'src/app/product.service';


@Component({
  selector: 'app-admin-products',
  templateUrl: './admin-products.component.html',
  styleUrls: ['./admin-products.component.css']
})

export class AdminProductsComponent implements OnInit{

  products: Product[]= [];
  subscription: Subscription;
  dtOptions: DataTables.Settings ={};

  constructor(private productService: ProductService, private http: HttpClient){
    this.subscription  = this.productService.getAll().subscribe(product =>
      this.products = product);
  }

  ngOnInit(): void {
    
    const that = this;
    this.dtOptions = {
      serverSide: true,
      ajax: (dataTablesParameters: any, callback) => {
        that.http.
        post<DataTablesResponse>(
            'https://ogstore-99015-default-rtdb.asia-southeast1.firebasedatabase.app/.json',
            dataTablesParameters, {}
          ).subscribe(resp => {
            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: resp.data,
            });
          });
      },
      columns: [{
        title: 'Title',
        data: 'title'
        }, {
          title: 'Price',
          data: 'price'
        }]
     };
  }

}

product.ts

export interface Product{
    data: any;
    key: string;
    title?: string;
    price?: number;
    category?: string;
    imageUrl?: string;
    description?: string;
}

product.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { map } from 'rxjs';
import { Product } from './modules/product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private db: AngularFireDatabase) { }

  create(product) {
    this.db.list('/products ').push(product); 
  }

  getAll(){
    return this.db.list<Product>('/products ').snapshotChanges()
    .pipe(map( action => {
        return action.map(product => {
        const key = product.payload.key;
        const data = product.payload.val();
        return {data, key};
      })
     } )); 
  }

  get(productId: string){
    return this.db.object('/products /' + productId).valueChanges();
  }

  update(productId, product){
    return this.db.object('/products /' + productId).update(product);
  }

  delete(productId){
    return this.db.object('/products /' + productId).remove();
  }
}

dataTable-response.model.ts

export class DataTablesResponse {
    data: any[];
    draw: number;
    recordsFiltered: number;
    recordsTotal: number;
  }

I did tried a lot of things, but can’t actually able to fix the issue. What I think is my admin-product.component.ts file isn’t actually able to read the array products data using resp in the post method. It may be someting else. Plz help me, I 'm struck on the isssue now for almost a week.