In this article, I’m going to walk you through developing a simple weather app in Angular and in the process (hopefully!) give you an overview of the most commonly used RxJS features.

The final result is shown below.

Haven’t heard about RxJS? It is a Javascript library used to handle asynchronous events. Think network calls, notifications, and user events. All of these can happen at different times in our apps and RxJS provides us with tools to handle these observable streams, compose them, mix and match to give us the results that we want! Read more about them here.

Ok, enough theory for now. Let’s dive into some code!

Preparing the project

For the weather app, we just need a simple Angular project, with the Angular Material components library included. This can be achieved by running these commands.

ng new weather-app
ng add @angular/material

The layout of the app is quite simple. We add a material select component in the app.component.html file. Then, we have its corresponding code representing the names of cities in the app.component.ts file.

#web-development #angular #rxjs #javascript