Rerender angular Datatable , Getting all the records

Question

I have a Angular application with a simple CRUD functionality. I have tested my data with static table and this works. Now I am using a data table framework called Angular data table.

I am reloading getdata() Method After create product. But all the records showing datatable ?

Is there any solution ? Pls help me on this.

I'm trying to update(rerender) angular datatable with new dtOptions

import { Component, OnDestroy, OnInit, AfterViewInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import { MatDialogConfig, MatDialog } from '@angular/material/dialog';
import { ProductCreateComponent } from '../products/product-create/product-create.component';
import {DataTableDirective, DataTablesModule} from 'angular-datatables';

const dialogConfig= new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;

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

  dtOptions: DataTables.Settings = {};
  dtElement: DataTableDirective;
  persons: any[] = [];
  isDtInitialized:boolean = false;
  dtTrigger: Subject<any> = new Subject<any>();

  constructor(
    private httpClient: HttpClient,
    private dialog:MatDialog,
    ) { }

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

  createProduct()
  {
    dialogConfig.width = "60%";
    dialogConfig.data = {
      // updateProdId: this.updateProductId
    }
    this.dialog.open(ProductCreateComponent, dialogConfig);

    this.dialog.afterAllClosed.subscribe(e=>{
      this.getData();
    });
  }

  getData() {
    this.httpClient.get<any[]>('https://api.npoint.io/73d6b5477838c422e54c')
    .subscribe(data => {
      this.persons = (data as any).data;
      // Calling the DT trigger to manually render the table
      if (this.isDtInitialized) {
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
          dtInstance.destroy();
          this.dtTrigger.next(this.dtOptions);
        });
      } else {
        this.isDtInitialized = true
        this.dtTrigger.next(this.dtOptions);
      }
    });
  }

  ngOnDestroy(): void {
    // Do not forget to unsubscribe the event
    this.dtTrigger.unsubscribe();
  }

}

<button (click)="createProduct()" mat-raised-button>New Product</button>
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
    <thead>
      <tr>
        <th>ID</th>
        <th>First name</th>
        <th>Last name</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let person of persons">
        <td>{{ person.id }}</td>
        <td>{{ person.firstName }}</td>
        <td>{{ person.lastName }}</td>
        <td><a href="#" (click)="update(person.firstName)">Edit</a></td>
      </tr>
    </tbody>
  </table>

I need to show records based on Page Length.