Transforming data using RxJS

We are going to use an RxJS reactive pipe (or data stream) to reshape the structure of data coming from the external API to fit the shape of the data we expect within our Angular app. If we don't do this, then our code will fail due to a type mismatch error.

Refer to Chapter 1, Introduction to Angular and Its Concepts, to get a deeper understanding of RxJS and reactive programming.

Implementing Reactive transformations

To avoid future mistakes such as returning an unintended type of data from your service, you need to update the getCurrentWeather function to define the return type as Observable<ICurrentWeather> and import the Observable type, as shown:

src/app/weather/weather.service.ts
import { Observable } from 'rxjs'
import { ICurrentWeather } from '../interfaces'
...
export class WeatherService {
  ...
  getCurrentWeather(city: string, country: string): 
    Observable<ICurrentWeather>...