This device is not compatible.

Build a Weather App Using Angular and RxJS

PROJECT


Build a Weather App Using Angular and RxJS

In this project, we’ll learn to build a weather app that provides real-time weather updates and forecasts using Angular integrated with the OpenWeather API.

Build a Weather App Using Angular and RxJS

You will learn to:

Retrieve the current weather data of any location.

Display the extracted values from API to the Angular application.

Retrieve the 5-day/3-hour weather forecast for any location.

Use RxJS and Material UI to facilitate the Angular application.

Skills

Web Development

Front-end Development

API Integration

Prerequisites

Good understanding of Angular and RxJS

Familiarity with OpenWeather API

Good understanding of Material UI

Technologies

RxJS logo

RxJS

Angular

Material UI

Project Description

OpenWeather API provides all kinds of weather information for any global city. In this project, we’ll use this API to extract the current weather and 3-hour weather forecast for the next 5 days for any given location.

We'll use Angular to handle API-related operations. Angular's RxJS library will handle HTTP GET requests to retrieve weather updates from the API. We'll also use Material UI components to assist the frontend development. This web application will comprise dynamic background functionality for different kinds of weather (sunny, mostly cloudy, clear sky, etc.).

Here is the final layout of the application:

The final layout of the application
The final layout of the application

Project Tasks

1

Get Started

Task 0: Introduction and Initial Setup

Task 1: Take Input from the User

2

Handle Latest Weather Updates Based on the User Input

Task 2: Create an Interface Object to Store the Current Weather

Task 3: Select the API URL Based on User Input

Task 4: Extract and Map Current Weather from API

Task 5: Display the Current Data on the UI

Task 6: Set Dynamic Backgrounds

3

Handle Weather Forecasts

Task 7: Extract Five-Day Forecasts Data from the API

Task 8: Extract Daily Timelines and Corresponding Weather

Task 9: Develop UI to Display Weather Forecasts

Congratulations!