Ngx-pagination not working after a click event in dialog box

See more:

Javascript

Typescript

Angular11

Currently i'm working on pagination and showing agm-maps in a project. And the problem is that the ngx-pagination is not working if i click the icon with a click event attached to it. don't know where i'm going wron can somebody help me with this.

What I have tried:

Here is the Html part:

<pre lang="HTML">

here is the typescript part:

myFunc() {
    this.x = document.getElementById('hideDiv');
    this.y = document.getElementById('myDiv');


    if (this.y.style.display == 'none') {
      // this.x.style.display='none';
      this.y.style.display = 'block';

    } else {
      this.x.style.display = 'block';
      this.y.style.display = 'none';
    }
  }


  mapPopup(Event: any): void {
 //  if(!this.userDetails){
  this.data = {
    company_id : 166,
    vehicle_id : 1242
  };
 /* }else{
  this.data02 = {
     "company_id": this.userDetails.company_id,
     "vehicle_id" : this.userDetails.vehicle_id

      }
  }*/

 // console.log(this.data, '>>>>>', this.userDetails);
  this.dashboardService.getTotalFleetPopup(this.data).subscribe(item => {
console.log('item is populated>>>>', item);
this.responseData = item;
// this.date1= new(this.responseData.stoppage_details.end_time);
// tslint:disable-next-line:max-line-length
// console.log(this.responseData.stoppage_details[0].start_longitude, '<<<<how is the lat and long', this.responseData.stoppage_details[0].start_latitude);
this.responseData.stoppage_details.forEach((latAndLong: any) => {
  this.lat = latAndLong.start_latitude;
  this.long = latAndLong.start_longitude;
  this.zoom = 4;
  this.latAndLong1 = Array(latAndLong);
  console.log('lat', latAndLong);
  // console.log('long', this.long);
  // tslint:disable-next-line:no-unused-expression
  return this.lat, this.long, this.zoom;
});
console.log(this.long, 'long', this.lat);

// console.log('resp>>>>>', this.responseData.stoppage_details);



});

  }