Building a Angular weather app with Angular 13 and accessing live weather forecast data through Subscribe and use "WeatherAPI.com" public API from RapidAPI
Endpoint: Forecast Weather API (HTTP GET) Note: Use JavaScript(fetch) code snippets
Creating service (weather) inside your Angular App:
Create a folder 'services' in the 'app' directory and get into that folder..
> cd .\src\app\services\
Then, run the ng command...
> ng g s weather
Adding HTTP Client:
In the 'app.module.ts' file import..
import {HttpClientModule} from '@angular/common/http';
and use declare it.
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
Injecting HttpClient in 'weather.service.ts' File:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class WeatherService {
constructor(private http: HttpClient) { }
}
Adding REST API Details in environment.ts File:
export const environment = {
production: false,
weatherApiBaseURL: 'https://weatherapi-com.p.rapidapi.com/forecast.json',
XRapidAPIHostHeaderName: 'X-RapidAPI-Host',
XRapidAPIHostHeaderValue: 'weatherapi-com.p.rapidapi.com',
XRapidAPIKeyHeaderName: 'X-RapidAPI-Key',
XRapidAPIKeyHeaderValue: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
};
Formatting JSON Data & Converting to TypeScript
Copy the results(JSON) from RapidAPI and format it here
Then, convert the JSON into TypeScript here
Creating TypeScript Model
Paste the JSON to TypeScript converted code in the model (ex: weather.model.ts)
Finally, access service(WeatherService) from the App component
Comments