thisiszoaib

@Injectable({ providedIn: "root" })
export class WeatherService {
  constructor(private http: HttpClient) {}
  getWeatherForCity(city: string): Observable<any> {
    const path = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&APPID=695ed9f29c4599b7544d0db5c211d499`;
    return this.http.get(path);
  }
}

thisiszoaib

@Component({
  selector: "app-weather-report",
  templateUrl: "./weather-report.component.html",
  styleUrls: ["./weather-report.component.scss"]
})
export class WeatherReportComponent implements OnInit {
  constructor(
    private weatherService: WeatherService,
    private route: ActivatedRoute
  ) {}

thisiszoaib

<mat-card class="mat-elevation-z5" *ngIf="data$ | async as data">
  <mat-card-header>
    <mat-card-title>{{data.name}}'s weather</mat-card-title>
    <mat-card-subtitle>Today: {{today | date }}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <div class="flex-row">
      <div class="temp">
        <span class="big-text">{{data.main.temp | number:'0.0-0'}} C</span>
        <span>Feels like </span>

thisiszoaib

:host {
  display: flex;
  justify-content: center;
  position: relative;
}
.top-bar {
  position: absolute;
  left: 0;
  top: 0;
}

thisiszoaib

getWeatherForCity(city: string): Observable<any> {
    const path = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&APPID=695ed9f29c4599b7544d0db5c211d499`;
    return this.http.get(path).pipe(
      map(data => ({
        ...data,
        image: `http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`
      })),
    );
  }

thisiszoaib

<div class="outlook">
        <img [src]="data.image" class="image" />
        <span>{{data.weather[0].description | titlecase}}</span>
</div>

thisiszoaib

this.data$ = this.route.params.pipe(
      map(params => params["locationName"]),
      filter(name => !!name),
      tap(() => {
        this.loading = true;
      }),
      concatMap(name => this.weatherService.getWeatherForCity(name)),
      tap(() => {
        this.loading = false;
      })

thisiszoaib

this.data$ = this.route.params.pipe(
      map(params => params["locationName"]),
      filter(name => !!name),
      tap(() => {
        this.loading = true;
      }),
      concatMap(name => this.weatherService.getWeatherForCity(name)),
      tap(() => {
        this.loading = false;
      })

thisiszoaib

getWeatherForCity(city: string): Observable<any> {
    const path = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&APPID=695ed9f29c4599b7544d0db5c211d499`;
    return this.http.get(path).pipe(
      map(data => ({
        ...data,
        image: `http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`
      })),
      delay(500)
    );
}

thisiszoaib

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit, OnDestroy {
  countries = [
    {
      name: "United Kingdom",
      cities: ["London", "Warwick", "Birmingham"]