How to add user input dynamically to Http Call in a Service

Question

I am very new to Angular and trying to play with the real data.

I am making an API call to darksky API , well at least I am trying to do.

What I want to do is ;

At the beginning I have a small form, which asks from user to enter latand longcoordinations of a place.

The code is actually working fine, If I pre-define the latand long and give it as parameter to my Link.

I've created a service which makes the API call.

And I couldn't find any possible way to take my forms input value and put it into a service. How can I create it ?

My code ;

My Service app.service.ts

    import { Injectable } from '@angular/core';
    import { Http, Response } from '@angular/http';
    import 'rxjs/add/operator/map';

    @Injectable()
    export class WeatherService {
      constructor (private http: Http) {}

      getWeatherCast() {
        // If I pre-define lat and long , it works  otherwise it says ' lat and long  are not known variables  :( 
        return this.http.get('https://api.darksky.net/forecast/ae249dfb82f6c414cde7809cd2c83e6d/'+ lat + ',' + long)
          .map((res: Response ) => res.json());
      }
    }

My app.component.ts

import {Component, OnInit} from '@angular/core';
import { WeatherService } from "./app.service" ;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  constructor(private weatherService : WeatherService) {}
  ngOnInit() { }


  currentWeather ;
  test (value: any ) {
    // console.log(value);
      console.log(Number(value.lat), 'lat');
      console.log(value.long, 'long');
      this.weatherService.getWeatherCast().subscribe(data => this.currentWeather = data);
      console.log('Weather is ; ', this.currentWeather);


  }
}

and my html ;

    <div class="container">
  <h3> Test Weather application</h3> <br>
  <form #myForm ='ngForm' (ngSubmit)="test(myForm.value)">
    <div class="form-group">
      <label> Lat </label>
      <input type="text" class="form-control" name="lat" ngModel>
    </div>
    <div class="form-group">
      <label> Long </label>
      <input type="text" class="form-control" name="long" ngModel>
    </div>
    <button class="btn btn-primary" type="submit">
      <h2> Find out What's the weather like !  </h2>
    </button>
  </form>

</div>

score 0 · Accepted Answer · answered Aug 13 '17 at 12:23

Define the variables lat and lng inside your component

export class AppComponent implements OnInit{
 lat: number;
 lng: number;
}

change your template with the model variables

Pass the values to your service ,

 this.weatherService.getWeatherCast(this.lat,this.lng).subscribe(data => this.currentWeather = data);

Also your service should be modified as,

 getWeatherCast(lat:any,long:any) {            
        return this.http.get('https://api.darksky.net/forecast/ae249dfb82f6c414cde7809cd2c83e6d/'+ lat + ',' + long)
          .map((res: Response ) => res.json());
      }

Thanks a lot, it helped me so much, I have no idea why someone did give -downvote to the question and to your answer — Atlas, Aug 13 '17 at 13:11

How to add user input dynamically to Http Call in a Service

1 Answers1