Integrating OpenWeatherMap and OpenUV weather APIs with Angular 5 — Live UV Index data

There are many weather API providers who does provide live and historical weather data. In this article we shall see how to integrate OpenWeatherMap and OpenUV APIs to read live UV Index at user’s current location in Angular 5.

Check out the live demo:

First step is to register yourself on these weather portal to get your personal API Key. This key shall be used as API parameter to fetch weather data. Once you register with OpenUV, you shall get API KEY which can be used right away whereas OpenWeatherMap takes around 10–15 minutes for activation of API Key. Once activated you can start firing REST API requests and get weather data as a response.

Another difference is, for OpenUV API access — you need to pass private API Key as ‘x-access-header’ value in HttpHeaders object whereas for OpenWeatherMap, API Key goes as a query string.

Once you are set with above steps then its just calling HTTP GET methods using HttpClient object.

You can find complete source code on my GitHub repository.

Cheers!