The Bug Distance not displayed on My reservation Page is fixed

src/app/home/home.page.ts

@@ -8,6 +8,8 @@ import { ToastService } from '../services/toast.service';
 import { Router } from '@angular/router';
 import { LocationService } from '../services/location.service';
 import { LoadingService } from '../services/loading.service';
+import { DistanceService } from '../services/distance.service';
+
 
 declare var H: any;
 
@@ -29,6 +31,7 @@ export class HomePage implements OnInit, OnDestroy {
 
   public isDetailsVisible = false;
   public selectedBike = { id: 0 };
+  public distance="";
   public isBikeReserved = false;
 
   public currentLocationMarker: any;
@@ -42,6 +45,7 @@ export class HomePage implements OnInit, OnDestroy {
     public httpClient: HttpClient,
     private storage: Storage,
     private toastService: ToastService,
+    public distanceService: DistanceService,
     public locationService: LocationService,
     public loadingService: LoadingService) {
 
@@ -261,6 +265,8 @@ export class HomePage implements OnInit, OnDestroy {
 
   showBikeDetails(bike) {
     this.selectedBike = bike;
+    this.distance= bike.distance;
+    this.distanceService.setDistance(this.distance);
     this.isDetailsVisible = true;
   }
 
@@ -297,5 +303,6 @@ export class HomePage implements OnInit, OnDestroy {
     //   this.locationService.liveLocationSubject.unsubscribe();
     // }
   }
+  
 
 }

src/app/myreservation/myreservation.page.html

@@ -45,7 +45,7 @@
           </ion-row>
           <ion-row>
             <ion-col>Bike Distance</ion-col>
-            <ion-col>{{ bikeDetails.distance +" m"}}</ion-col>
+            <ion-col>{{distance +" m"}}</ion-col>
           </ion-row>
           <ion-row>
             <ion-col>

src/app/myreservation/myreservation.page.ts

@@ -9,6 +9,7 @@ import { ToastService } from '../services/toast.service';
 import { Router } from '@angular/router';
 import { LocationService } from '../services/location.service';
 import { LoadingService } from '../services/loading.service';
+import { DistanceService } from '../services/distance.service';
 
 declare var H: any;
 
@@ -30,6 +31,7 @@ export class MyreservationPage implements OnInit {
   isBikeHired = false;
   address = "sample";
   isBikeReserved = true;
+  distance="0";
 
   private currentUserPosition = { lat: 48.783480, lng: 9.180319 };
 
@@ -58,6 +60,7 @@ export class MyreservationPage implements OnInit {
     private toastService: ToastService,
     private router: Router,
     public locationService: LocationService,
+    public distanceService: DistanceService,
     public loadingService: LoadingService) {
     this.platform = new H.service.Platform({
       'apikey': 'tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k'
@@ -149,6 +152,7 @@ export class MyreservationPage implements OnInit {
             console.log('Bike Details', resp);
             this.loadingService.hideLoader();
             this.bikeDetails = resp.data;
+            this.distance = this.distanceService.getDistance();
             this.reverseGeocode(this.platform, this.bikeDetails.lat, this.bikeDetails.lon);
             this.isBikeReserved = true;
             this.addBikeOnMap();

src/app/services/distance.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { DistanceService } from './distance.service';
+
+describe('DistanceService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: DistanceService = TestBed.get(DistanceService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/distance.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DistanceService {
+distanceDetails = {distance : "",distancevalue:""}
+  constructor() { }
+public getDistance(){
+  return this.distanceDetails.distancevalue
+}
+public setDistance (distancevalue){
+  this.distanceDetails.distancevalue = distancevalue
+}
+}