diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 30f19bc..1b07991 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,8 @@
-import { Component, AfterViewInit} from '@angular/core';
+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 { defaults as defaultControls } from 'ol/control';
 import { fromLonLat } from 'ol/proj';
@@ -18,6 +22,33 @@ export class AppComponent implements AfterViewInit {
   title = "Street Map";
   map: Map;
 
+  @ViewChild("inputautocompleteList") autocompleteList: ElementRef;
+
+
+  constructor(private nominatimService: NominatimService, private photonService: PhotonService) { }
+  
+  updateAutoCompleteList(): void{
+    this.autocompleteList.nativeElement.innerHTML = "Fsd";
+  }
+
+  // Gets called in "app.component.html" when an input changes its value
+  getValue(valueFrom:string, valueTo:string): void{
+    console.log("From " + valueFrom + " to " + valueTo);
+
+    /*
+    this.nominatimService.sendQueryRequest(valueFrom)
+    .subscribe((response: Nominatim[]) => console.log(response));*/
+
+    this.photonService.sendQueryRequest(valueFrom)
+    .subscribe((response: Photon[]) => console.log(response));
+
+    
+  }
+
+  ngOnInit() {
+    
+  }
+
   ngAfterViewInit() {
     this.map = new Map({
       target: 'map',
diff --git a/src/app/interfaces/photon.ts b/src/app/interfaces/photon.ts
new file mode 100644
index 0000000..fc57a09
--- /dev/null
+++ b/src/app/interfaces/photon.ts
@@ -0,0 +1,22 @@
+interface PhotonGeometry{
+    coordinates?: Array<number>;
+    type?: string;
+}
+
+interface PhotonProperties{
+    osm_id?: number;
+    osm_type?: string;
+    extent?: Array<number>;
+    country?: string;
+    osm_key?: "place";
+    countrycode?: string;
+    osm_value?: string;
+    name?: string;
+    type?: string;
+}
+
+export interface Photon{
+    geometry?: PhotonGeometry;
+    type?: string;
+    properties?: PhotonProperties;
+}
\ No newline at end of file
diff --git a/src/app/photon.service.spec.ts b/src/app/photon.service.spec.ts
new file mode 100644
index 0000000..889bf14
--- /dev/null
+++ b/src/app/photon.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PhotonService } from './photon.service';
+
+describe('PhotonService', () => {
+  let service: PhotonService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PhotonService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/photon.service.ts b/src/app/photon.service.ts
new file mode 100644
index 0000000..cfad5b8
--- /dev/null
+++ b/src/app/photon.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Photon } from './interfaces/photon';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+// communicates with Photon (https://photon.komoot.io/)
+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);
+  }
+}
\ No newline at end of file