I am new to the world of Angular and I am attempting to create a basic weather application. However, I am encountering issues when trying to pass the city value from the form on ngSubmit to the API service. I have attempted to use an Emitter Event to transmit the value, but it appears that the city value is not being updated in the service. Is there a method for sending this value to the API service and updating the city name?
weather-card.component.html
<div class="input-container">
<app-weather-form></app-weather-form>
</div>
<div *ngFor="let item of weathers[0]; first as isFirst">
<div *ngIf="!isFirst">
<mat-card class="mat-card">
<p><strong>Name :</strong>{{ item.name }}</p>
<p><strong>State :</strong> {{ item.region }}</p>
<p><strong>Country :</strong>{{ item.country }}</p>
<p><strong>Latitude:</strong> {{ item.lat }}</p>
<p><strong>Longitude:</strong> {{ item.lon }}</p>
</mat-card>
</div>
</div>
weather-card.component.ts
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { WeatherService } from '../../services/weather.service';
import { WeatherData } from '../../models/weather';
import { WeatherFormComponent } from '../weather-form/weather-form.component';
@Component({
selector: 'app-weather-card',
templateUrl: './weather-card.component.html',
styleUrls: ['./weather-card.component.scss'],
})
export class WeatherCardComponent implements OnInit {
weathers: any = [];
constructor(public weatherService: WeatherService) {}
ngOnInit() {
this.getUsers();
}
getUsers() {
this.weatherService.getWeatherData().subscribe((data) => {
this.weathers = Object.entries(data);
console.log(this.weathers);
});
}
}
weather-form.component.html
<form (ngSubmit)="submit()">
City:<br />
<input type="text" name="city" [(ngModel)]="name" /><br />
<input type="submit" value="Submit" />
</form>
weather-form.component.ts
import { WeatherService } from 'src/app/services/weather.service';
import { WeatherData } from 'src/app/models/weather';
@Component({
selector: 'app-weather-form',
templateUrl: './weather-form.component.html',
styleUrls: ['./weather-form.component.scss'],
})
export class WeatherFormComponent implements OnInit {
@Output() onSelection: EventEmitter<any> = new EventEmitter();
weather!: WeatherData;
name!: '';
constructor(private weatherService: WeatherService) {}
ngOnInit(): void {}
submit() {
this.weatherService.getWeatherData().subscribe((data: any) => {
this.onSelection.emit(this.weather);
});
}
}
weather.ts
export interface WeatherData {
name: string;
region: string;
country: string;
humidity: string;
localtime: string;
lat: string;
lon: string;
}
weather.service.ts
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import {
HttpClient,
HttpHeaders,
HttpErrorResponse,
} from '@angular/common/http';
let serviceUrl: String = 'http://api.weatherapi.com/v1/current.json';
let apiKey: String = 'someAPIKey'; // insert your API key here
let name: String = 'mumbai';
@Injectable({
providedIn: 'root',
})
export class WeatherService {
constructor(private http: HttpClient) {}
getWeatherData() {
return this.http.get(
serviceUrl + '?key=' + apiKey + '&q=' + name + '&aqi=no'
);
}
}
In the weather.service.ts file, I wanted to change the value of name by passing the value from form and pass it to the URL. Currently, I have hard coded the value.