import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SearchFormComponent } from './components/search-form/search-form.component';
import { QueryDisplayComponent } from './components/query-display/query-display.component';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    SearchFormComponent,
    QueryDisplayComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  exports:[],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<div style="text-align:center">
  <h1>
    Places Search
  </h1>
</div>


<router-outlet></router-outlet>

import { Component, OnInit } from '@angular/core';
// import { Place } from '../../place'
import { GetReqPlaces } from '../../services/get-req-places.service'
import { Router } from '@angular/router'


@Component({
  selector: 'app-search-form',
  templateUrl: './search-form.component.html',
  styleUrls: ['./search-form.component.css']
})
export class SearchFormComponent implements OnInit {

  constructor(private getPlaces: GetReqPlaces, private router: Router) { }

  westLong: number;
  eastLong: number;
  northLat: number;
  southLat: number;

  // log(x){console.log(x)}
  onSubmit(form){

  this.westLong = form.value.wLong; //
  this.eastLong = form.value.eLong; //
  this.northLat = form.value.nLat; //
  this.southLat = form.value.sLat; //
    console.log(this.getPlaces.getPlaces(this.westLong,this.southLat,this.eastLong,this.northLat))
  }

}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent} from './app.component'
import { SearchFormComponent} from '../components/search-form.component'


const routes: Routes = [

  { path: 'search', component: SearchFormComponent },


];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }