added analyze

src/app/analyze/analyze.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { AnalyzeComponent } from './analyze.component';
+
+describe('AnalyzeComponent', () => {
+  let component: AnalyzeComponent;
+  let fixture: ComponentFixture<AnalyzeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AnalyzeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnalyzeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/analyze/analyze.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router'
+
+@Component({
+  selector: 'app-analyze',
+  templateUrl: './analyze.component.html',
+  styleUrls: ['./analyze.component.scss']
+})
+export class AnalyzeComponent implements OnInit {
+  lon!: string | null;
+  lat!: string | null;
+  constructor(
+    private route: ActivatedRoute,
+  ) { }
+
+  ngOnInit() {
+    this.lon = this.route.snapshot.paramMap.get('lon');
+    this.lat = this.route.snapshot.paramMap.get('lat');
+  }
+
+}

src/app/app-routing.module.ts

@@ -1,10 +1,18 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AnalyzeComponent } from './analyze/analyze.component';
+import { SearchComponent } from './search/search.component';
 
-const routes: Routes = [];
+
+const routes: Routes = [
+  { path: '', redirectTo: '/search', pathMatch: 'full' },
+  { path: 'search', component: SearchComponent },
+  { path: 'analyze/:lon/:lat', component: AnalyzeComponent }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }
+export const routingComponents = [SearchComponent, AnalyzeComponent];

src/app/app.component.html

@@ -1,3 +1,3 @@
 <h1>Analyze your local area!</h1>
 
-<app-search class="center"></app-search>
+<router-outlet class="center"></router-outlet>

src/app/app.module.ts

@@ -1,14 +1,15 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+
 import { HttpClientModule } from '@angular/common/http';
-import { AppRoutingModule } from './app-routing.module';
+import { AppRoutingModule, routingComponents } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { SearchComponent } from './search/search.component';
+
 
 @NgModule({
   declarations: [
     AppComponent,
-      SearchComponent
+      routingComponents
    ],
   imports: [
     BrowserModule,

src/app/search/search.component.html

@@ -2,11 +2,17 @@
   <input class="center" type="text" name="searchValue" #searchInput (change)="inputChange(searchInput.value)" placeholder="Search your address" />
 
 
-  <div *ngIf="searchResults && searchResults.length > 0"class="search-results center">
+  <div *ngIf="searchResults && searchResults.length > 0" class="search-results center">
     <br>
     <div *ngFor="let result of searchResults">
-      <div class="search-result">
+      <div class="search-result"
-          <span><b>{{result.properties.name}}</b> {{result.properties.postcode}} {{result.properties.city}} {{result.properties.country}}</span>
+       (click)="analyze(result.geometry!.coordinates[0], result.geometry!.coordinates[1])"
+        *ngIf="result.geometry!.coordinates && result.geometry?.coordinates!.length >= 2">
+
+        <span >
+          <b>{{result.properties.name}}</b> {{result.properties.postcode}} {{result.properties.city}} {{result.properties.country}}
+        </span>
+
       </div>
     </div>
   </div>

src/app/search/search.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Photon, PhotonFeatureCollection } from '../interfaces/photon';
 import { PhotonService } from '../services/photon.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-search',
@@ -13,13 +14,14 @@ export class SearchComponent implements OnInit {
   searchResults?: Array<Photon>;
 
   constructor(
-    private photonService: PhotonService
+    private photonService: PhotonService,
+    private router: Router
   ) { }
 
   ngOnInit() {
   }
 
-  inputChange(value: string) {
+  inputChange(value: string): void {
     this.searchResults = [];
     this.photonService.sendQueryRequest(value.replace(/[0-9]/g, ''))
       .subscribe((response: PhotonFeatureCollection) => response.features?.forEach(feature => {
@@ -27,4 +29,8 @@ export class SearchComponent implements OnInit {
       })
     );
   }
+
+  analyze(lon: number, lat:number){
+    this.router.navigate(['/analyze', lon, lat]);
+  }
 }

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

@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { OsmService } from './osm.service';
+
+describe('Service: Osm', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [OsmService]
+    });
+  });
+
+  it('should ...', inject([OsmService], (service: OsmService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/osm.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class OsmService {
+
+constructor() { }
+
+}

tsconfig.json

@@ -27,6 +27,7 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictTemplates": true,
+    "strictNullCheck": false,
   }
 }