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

<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">
              <input matInput (keyup)="applyFilter($event)" placeholder="Stopped details" #input>
          <div class="table table-responsive">
              <table   class="table table-hover">
                <th>Stop No:</th>
                <th>Stop Address</th>
                <th>Stop Time</th>
                <th>Stop Duration</th>
                <!--slice: (page-1) * pageSize : (page-1) * pageSize + pageSize-->
                <tr *ngFor="let row of data.row | paginate: { itemsPerPage: 5, currentPage: p } ; let i=index ">
                  <td>#314, JP Nagar, Whitefield.</td>
                  <td *ngIf="row.end_time; else row0">{{row?.end_time }}
                    <ng-template #row0 > {{date1}}</ng-template>
                 <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>



             <!--  <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>


</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 *ngFor="let marker of latAndLong1" [latitude]="marker.start_latitude" [longitude]="marker.start_longitude"></agm-marker>


<!---This si the end of the google maps for stop counts-->
  <!---End of second column--><br>
<!---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">

<!---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">


  <button mat-raised-button color="warn" (click)="dialogRef.close(false)">

here is the typescript part:

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

    if ( == 'none') {
      //'none'; = 'block';

    } else { = 'block'; = 'none';

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


 // console.log(, '>>>>>', this.userDetails);
  this.dashboardService.getTotalFleetPopup( => {
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) => { = 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.long, this.zoom;
console.log(this.long, 'long',;

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



Leave a Comment