added hidden coordinates inputs

src/app/interfaces/photon.ts

@@ -1,5 +1,5 @@
 interface PhotonGeometry{
-    coordinates?: Array<number>;
+    coordinates: Array<number>;
     type?: string;
 }
 

src/app/search/search.component.css

@@ -31,7 +31,7 @@
   }
   
 .autocomplete-items {
-    display:none;
+    display:block; /* without debugging it should be display:none */
     position: absolute;
     border: 1px solid #d4d4d4;
     border-bottom: none;

src/app/search/search.component.html

@@ -1,21 +1,27 @@
 <div class="searchField">
+	<div id="coordinates">
+		<input *ngIf="photonItemsFrom[0]"  id="longFromInput" value="{{ longFrom }}">
+		<input *ngIf="photonItemsFrom[0]"  id="latFromInput" value="{{ latFrom }}">
+
+		<input *ngIf="photonItemsTo[0]"  id="longToInput" value="{{ longTo}}">
+		<input *ngIf="photonItemsTo[0]"  id="latToInput" value="{{ latTo }}">
+	</div>
 	<div class="autocomplete">
 	  	<input #inputFrom (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From">
 		  <div #inputautocompleteList class="autocomplete-items autocomplete-items-from">
-
+	
 			<div *ngFor="let item of nominatimItemsFrom" >
 				{{ item.display_name }}
 				<input type="hidden" value="{{ item.display_name }}">
 			</div>
 
-			<div *ngFor="let item of photonItemsFrom" >
+			<div *ngFor="let item of photonItemsFrom" (click)="changeInputs(true, item.geometry?.coordinates![0],  item.geometry?.coordinates![1] )">
 				{{ item.properties.name }} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}} 
-				<input type="hidden" value="{{  item.properties?.name }}">
 			</div>
 
 		</div>
 	</div>
-	<div class="autocomplete">
+	<div class="autocomplete" id="autocompleteTo">
 		<input #inputTo (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputTo" id="inputTo" placeholder="To">
 		<div #inputautocompleteList class="autocomplete-items autocomplete-items-to">
 
@@ -24,7 +30,7 @@
 				<input type="hidden" value="{{ item.display_name }}">
 			</div>
 
-			<div *ngFor="let item of photonItemsTo" >
+			<div *ngFor="let item of photonItemsTo" (click)="changeInputs(false, item.geometry?.coordinates![0],  item.geometry?.coordinates![1] )">
 				{{  item.properties.name }} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}}
 				<input type="hidden" value="{{  item.properties?.name }}">
 			</div>

src/app/search/search.component.ts

@@ -19,9 +19,22 @@ export class SearchComponent implements OnInit {
   photonItemsFrom: Photon[] = [];
   photonItemsTo: Photon[] = [];
 
+  longFrom: number = 0;
+  latFrom: number = 0;
+  longTo: number = 0;
+  latTo: number = 0;
+
   constructor(private nominatimService: NominatimService, private photonService: PhotonService) { }
 
-
+  changeInputs(isFrom: boolean, long: number, lat: number): void{
+    if(isFrom){
+      this.longFrom = long;
+      this.latFrom = lat;
+    }else{
+      this.longTo = long;
+      this.latTo = lat;
+    }
+  }
   // Gets called in "app.component.html" when an input changes its value
   getValue(valueFrom:string, valueTo:string): void{
     console.log("From " + valueFrom + " to " + valueTo);
@@ -41,15 +54,16 @@ export class SearchComponent implements OnInit {
     this.photonService.sendQueryRequest(valueFrom)
     .subscribe((response: PhotonFeatureCollection) => response.features?.forEach(feature => {
       this.photonItemsFrom.push(feature);
+      this.longFrom = <number>this.photonItemsFrom[0].geometry?.coordinates![0];
+      this.latFrom = <number>this.photonItemsFrom[0].geometry?.coordinates![1];
     }));
 
     this.photonService.sendQueryRequest(valueTo)
     .subscribe((response: PhotonFeatureCollection) => response.features?.forEach(feature => {
       this.photonItemsTo.push(feature);
+      this.longTo = <number>this.photonItemsTo[0].geometry?.coordinates![0];
+      this.latTo = <number>this.photonItemsTo[0].geometry?.coordinates![1];
     }));
-    
-    console.log(this.photonItemsFrom)
-
   }
   ngOnInit(): void {
   }