now using photon

src/app/app.component.ts

@@ -1,8 +1,5 @@
-import { Component, OnInit, AfterViewInit, ElementRef, ViewChild} from '@angular/core';
-import { Nominatim } from './interfaces/nominatim';
-import { NominatimService } from './nominatim.service';
-import { Photon } from './interfaces/photon';
-import { PhotonService } from './photon.service';
+import { Component, AfterViewInit, ElementRef, ViewChild} from '@angular/core';
+
 
 import { defaults as defaultControls } from 'ol/control';
 import { fromLonLat } from 'ol/proj';
@@ -25,7 +22,7 @@ export class AppComponent implements AfterViewInit {
   @ViewChild("inputautocompleteList") autocompleteList: ElementRef;
 
 
-  constructor(private nominatimService: NominatimService, private photonService: PhotonService) { }
+  constructor() { }
   
   updateAutoCompleteList(): void{
     this.autocompleteList.nativeElement.innerHTML = "Fsd";
@@ -39,8 +36,7 @@ export class AppComponent implements AfterViewInit {
     this.nominatimService.sendQueryRequest(valueFrom)
     .subscribe((response: Nominatim[]) => console.log(response));*/
 
-    this.photonService.sendQueryRequest(valueFrom)
-    .subscribe((response: Photon[]) => console.log(response));
+    
 
     
   }

src/app/interfaces/photon.ts

@@ -18,5 +18,10 @@ interface PhotonProperties{
 export interface Photon{
     geometry?: PhotonGeometry;
     type?: string;
-    properties?: PhotonProperties;
+    properties: PhotonProperties;
+}
+
+export interface PhotonFeatureCollection{
+    features?: Array<Photon>;
+    type?: string;
 }

src/app/photon.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Photon } from './interfaces/photon';
+import { Photon, PhotonFeatureCollection } from './interfaces/photon';
 import { Observable } from 'rxjs';
 
 @Injectable({
@@ -12,7 +12,7 @@ export class PhotonService{
   constructor(private http: HttpClient) { }
 
   // sends a query request to Photon and gets response (https://photon.komoot.io/)
-  sendQueryRequest(q: string): Observable<Photon[]> { 
-    return this.http.get<Photon[]>("https://photon.komoot.io/api/?q=" + q);
+  sendQueryRequest(q: string): Observable<PhotonFeatureCollection> { 
+    return this.http.get<PhotonFeatureCollection>("https://photon.komoot.io/api/?q=" + q);
   }
 }

src/app/search/search.component.html

@@ -2,19 +2,33 @@
 	<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 itemsFrom" >
+
+			<div *ngFor="let item of nominatimItemsFrom" >
 				{{ item.display_name }}
 				<input type="hidden" value="{{ item.display_name }}">
 			</div>
+
+			<div *ngFor="let item of photonItemsTo" >
+				{{ item.properties.name }}
+				<input type="hidden" value="{{  item.properties?.name }}">
+			</div>
+
 		</div>
 	</div>
 	<div class="autocomplete">
 		<input #inputTo (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputTo" id="inputTo" placeholder="To">
 		<div #inputautocompleteList class="autocomplete-items autocomplete-items-to">
-			<div *ngFor="let item of itemsTo" >
+
+			<div *ngFor="let item of nominatimItemsTo" >
 				{{ item.display_name }}
 				<input type="hidden" value="{{ item.display_name }}">
 			</div>
+
+			<div *ngFor="let item of photonItemsTo" >
+				{{  item.properties.name }}
+				<input type="hidden" value="{{  item.properties?.name }}">
+			</div>
+
 		</div>
 	</div>
 </div>

src/app/search/search.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, ElementRef, ViewChild} from '@angular/core';
 import { Nominatim } from '../interfaces/nominatim';
 import { NominatimService } from '../nominatim.service';
+import { Photon, PhotonFeatureCollection } from '../interfaces/photon';
+import { PhotonService } from '../photon.service';
 
 @Component({
   selector: 'app-search',
@@ -11,10 +13,13 @@ import { NominatimService } from '../nominatim.service';
 export class SearchComponent implements OnInit {
   @ViewChild("inputautocompleteList") autocompleteList: ElementRef;
 
-  itemsFrom: Nominatim[] = [];
-  itemsTo: Nominatim[] = [];
+  nominatimItemsFrom: Nominatim[] = [];
+  nominatimItemsTo: Nominatim[] = [];
 
-  constructor(private nominatimService: NominatimService) { }
+  photonItemsFrom: Photon[] = [];
+  photonItemsTo: Photon[] = [];
+
+  constructor(private nominatimService: NominatimService, private photonService: PhotonService) { }
 
 
   // Gets called in "app.component.html" when an input changes its value
@@ -23,12 +28,26 @@ export class SearchComponent implements OnInit {
     
     //this.updateAutoCompleteList([{display_name: 'Hallo'}, {display_name: 'Test2'}], [{display_name: 'Halload'}, {display_name: 'Test4'}]);
 
+    /*
     this.nominatimService.sendQueryRequest(valueFrom)
-    .subscribe((response: Nominatim[]) => this.itemsFrom = response);
+    .subscribe((response: Nominatim[]) => this.nominatimItemsFrom = response);
 
     this.nominatimService.sendQueryRequest(valueTo)
-    .subscribe((response: Nominatim[]) => this.itemsTo = response);
+    .subscribe((response: Nominatim[]) => this.nominatimItemsTo = response);
+    */
+
+    this.photonService.sendQueryRequest(valueFrom)
+    .subscribe((response: PhotonFeatureCollection) => response.features?.forEach(feature => {
+      this.photonItemsFrom.push(feature);
+    }));
+
+    this.photonService.sendQueryRequest(valueFrom)
+    .subscribe((response: PhotonFeatureCollection) => response.features?.forEach(feature => {
+      this.photonItemsTo.push(feature);
+    }));
     
+    console.log(this.photonItemsFrom)
+
   }
   ngOnInit(): void {
   }