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($event);" 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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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);
});
}
here is the dashboard part that i'm working on currently. with the data too.
https://jsoneditoronline.org/#left=local.jomafu&right=local.rejizo
totFleetPopup() {
// if(!this.userDetails){
this.data02={
"company_id" : 166,
"vehicle_id" : 1242
}
/* }else{
this.data02 = {
"company_id": this.userDetails.company_id,
"vehicle_id" : this.userDetails.vehicle_id
}
}*/
console.log(this.data02, ">>>>>", this.userDetails);
this.dashboardService.getTotalFleetPopup(this.data02).subscribe(item=>{
console.log("item is populated>>>>",item);
this.response_data=item;
// this.date1= new(this.response_data.stoppage_details.end_time);
console.log("<<<<how is the date",this.response_data.stoppage_details.end_time);
for(let i=0; i<=this.response_data.stoppage_details.length; i++){
if(this.response_data.stoppage_details.end_time != ""){
return this.date1 += this.response_data.stoppage_details.end_time;
}else{
return this.date1 += this.response_data.stoppage_details[i].end_time;
}
}
this.response_data.stoppage_details.forEach(stopAndStartTime=>{
console.table("time var",stopAndStartTime);
});
// this.date2= this.datepipe.transform(this.date1, 'hh:mm a')
// this.date2=new Date(this.date1);
// let details= Object.keys(this.response_data).map(key => this.response_data[key]);
// this.date2 = this.date1.format("hh:mm a") ;
console.log(this.date1, "time format<<<<",this.response_data.stoppage_details.start_time);
console.log("resp>>>>>", this.response_data.stoppage_details);
});
// console.log("resp>>>>>", this.response_data)
let dialogRef: MatDialogRef <any> = this.dialog.open(NgxTotFleetPopupComponent , {
width: '100%',
height: '500px',
disableClose: true,
data : {
row: this.response_data.stoppage_details,
date: this.date1
}
});
}
// this is the end of the total fleet's count popup ends
toArray(value){
return Object.keys(value).map(keys=> value[keys]);
}
here is a link to know what problem i'm facing right now? https://i.stack.imgur.com/S36c0.jpg
EDIT: I found out the problem why it is not working with a little digging i found that the problem is because of event bubbling. where the pagination is calling the event and the click function inside the table is also calling a click function.Even though its seperate i found out that the click event for pagination is like (pageChange) and the icon event is (click) which is why it is not working if i add the stoppropagation in the function.Don't know what to do? any help will be appreciated.
updated typescript part:
myFunc(event) {
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';
}
// event.stopPropagation();
// event.preventDefault();
}
mapPopup(event) {
// 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);
});
// event.stopPropagation();
// event.preventDefault();
}
pageChanged(event: any): void {
this.p.currentPage = event.page;
console.log("event called");
this.getValues(this.p.currentPage,this.p.itemsPerPage);
}
getValues(currentPage: any, itemsPerPage: any) {
throw new Error('Method not implemented.');
}