creazione pagina detail

src/app/detail/detail.component.css

@@ -0,0 +1,5 @@
+.titolo {
+  font-size: 1.5em;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+}

src/app/detail/detail.component.html

@@ -1,8 +1,7 @@
 <div>
-  <h1>{{test.name}}</h1>
+  <h1 class="titolo">{{test.name}}</h1>
   <p>{{test.description}}</p>
-  <p>lat:{{cord.lat}}, lang:{{cord.lng}}</p>
-  <p>distanza:{{distance}}</p>
+  <p ng-model="showNav" *ngIf="showNav">Distanza: {{distance}}</p>
   <div id="nav" ng-model="showNav" *ngIf="showNav">
     <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1708.0829920038827!2d8.790506152417485!3d46.16602530670125!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4785c833c36e0bd5%3A0x427d483133d7c1a0!2sCPT%20Locarno%20(SPAI%20%E2%80%93%20MPT)%20-%20Centro%20professionale%20tecnico%20Locarno!5e0!3m2!1sit!2sch!4v1675246087183!5m2!1sit!2sch" width="650" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
   </div>

src/app/detail/detail.component.ts

@@ -13,7 +13,7 @@ export class DetailComponent implements OnInit {
 
   test = {
     name: 'SPAI',
-    cordinates: "46.165262,8.791225",
+    cordinates: "46.15187077044123, 8.799829438699243",
     description: "Lorem ipsum"
   }
 
@@ -23,7 +23,8 @@ export class DetailComponent implements OnInit {
   }
 
   showNav = true;
-  distance = 0;
+  distance: number | undefined;
+  displayedDistance = 0;
 
   getLocation() {
     console.log("get location");
@@ -49,6 +50,11 @@ export class DetailComponent implements OnInit {
       if (this.showNav) {
         this.distance = this.getDistanceBetweenCoordinates(lat1, lon1, +lat2, +lon2);
         console.log(this.distance);
+        if (this.distance == 0) {
+          this.showNav = false;
+          this.displayedDistance = Math.round(this.distance * 100) / 100;
+        }
+
         if (this.distance < 0.05) {
           this.showNav = false;
           clearInterval(intervalID);