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

Currently i’m working on pagination and showing agm-maps in a project. 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 wrong as i’m new to Angular can somebody help me with this.

Here is the HTML part:

<div class="row ">
<div fxFlex="100" fxLayout="column" fxLayoutAlign="end stretch">
<div class="col pull-right">

  <button mat-icon-button color="warn" (click)="dialogRef.close(false)">
    <mat-icon>cancel</mat-icon>
  </button>
</div>
</div>
</div><br>

<div class="row wrap" fxFlex="100">
. <div   fxLayout="row" fxLayoutAlign="start stretch" class="row">
  <div  fxLayout="column"   class="col" >
      <mat-card  style="width: 100%; height: auto;" >
       <!--   <mat-form-field appearance="standard">
              <mat-label>Filter</mat-label>
              <input matInput (keyup)="applyFilter($event)" placeholder="Stopped details" #input>
          </mat-form-field>-->
          <div class="table table-responsive">
              <table   class="table table-hover">
              <thead>
                <th>Stop No:</th>
                <th>Stop Address</th>
                <th>Stop Time</th>
                <th>Stop Duration</th>
                <th>Map</th>
              </thead>
              <tbody>
                <!--slice: (page-1) * pageSize : (page-1) * pageSize + pageSize-->
                <tr *ngFor="let row of data.row | paginate: { itemsPerPage: 5, currentPage: p } ; let i=index ">
                  <td>{{i+1}}</td>
                  <td>#314, JP Nagar, Whitefield.</td>
                  <td *ngIf="row.end_time; else row0">{{row?.end_time }}
                    <ng-template #row0 > {{date1}}</ng-template>
                  </td>
                 <td >{{row?.stoppage_time}} Mins</td>
                  <td ><b class="hoverExample" ><img height="45px" class="img-thumbnail" (click)="mapPopup($event); myFunc();" width="45px"  src="../../../../../assets/img/greenicon.png"></b></td>

                </tr>


              </tbody>

              </table>
            </div>
             <!--  <pagination-controls (pageChange)="p = $event"></pagination-controls> -->
             <!-- <ngb-pagination [pageSize] = "25" [collectionSize]="250" [(page)]="page" [boundaryLinks]="true"></ngb-pagination>-->
             <pagination-controls (pageChange)="p=$event"></pagination-controls>


</mat-card>



</div><!-- column end-->
<!---End of first column-->

<!--This si the place where the Google maps are placed-->
<div  id="myDiv">
<div fxLayout="column"  style="width: 500px;"  class="col ">
  <mat-card id="MyDiv" style="width: 100%;" >


      <agm-map style="width: 100%; height: 100vh;" [latitude]="12.2602" [zoom]="5" [longitude]="77.1461">
      <agm-marker-cluster>
      <agm-marker *ngFor="let marker of latAndLong1" [latitude]="marker.start_latitude" [longitude]="marker.start_longitude"></agm-marker>
      </agm-marker-cluster>
      </agm-map>

   </mat-card>


</div>
<!---This si the end of the google maps for stop counts-->
</div>
  <!---End of second column--><br>
</div>
<!---This sis a dummy filler for the close btn to go up incase if it is in the middle of the dialog box-->
<div style="width: 100%; height: 10vh" id="hideDiv">
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

</div>
<!---This sis the end of dummy filler for the close btn if it goes up incase if it is in the middle of the dialog box-->
  <div class="row wrap">
 <div fxLayout="row" fxLayoutAlign="end stretch">

<mat-dialog-actions>

  <button mat-raised-button color="warn" (click)="dialogRef.close(false)">
    Close
  </button>
</mat-dialog-actions>
</div>
</div>
</div>

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);



});

  }