unwrap observable to correctly use RxJS operators

Author: Andrew Evans

src/app/cards/current-conditions/current-conditions.component.html

@@ -1,4 +1,4 @@
-<mat-grid-list cols="4" rowHeight="4em" *ngIf="data != undefined; else elseBlock">
+<mat-grid-list cols="4" rowHeight="4em" *ngIf="data$ | async as data; else elseBlock">
   <mat-grid-tile [colspan]="2" [rowspan]="1">
     <p><span class="title">Latitude</span><span>{{ data.currentConditions.latitude }}</span></p>
   </mat-grid-tile>

src/app/cards/current-conditions/current-conditions.component.ts

@@ -1,31 +1,22 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { WeatherData } from 'src/app/models/weather-data/weather-data';
-import { Store } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
 import { AppState, selectWeather } from 'src/app/reducers';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-current-conditions',
   templateUrl: './current-conditions.component.html',
   styleUrls: ['./current-conditions.component.css']
 })
-export class CurrentConditionsComponent implements OnInit, OnDestroy {
+export class CurrentConditionsComponent implements OnInit {
 
-  data: WeatherData;
-  private unsubscribeWeather: Subject<void> = new Subject<void>();
+  data$: Observable<WeatherData>;
 
   constructor(private store: Store<AppState>) { }
 
   ngOnInit(): void {
-    this.store
-      .select(selectWeather)
-      .pipe(takeUntil(this.unsubscribeWeather))
-      .subscribe((weather) => this.data = weather);
-  }
-
-  ngOnDestroy() {
-    this.unsubscribeWeather.next();
+    this.data$ = this.store.pipe(select(selectWeather));
   }
 
 }

src/app/cards/hourly-forecast/hourly-forecast.component.html

@@ -1,4 +1,4 @@
-<div class="hourly-forecast" *ngIf="data != undefined; else elseBlock">
+<div class="hourly-forecast" *ngIf="data$ | async as data; else elseBlock">
   <table mat-table [dataSource]="data.hourlyForecast" class="mat-elevation-z8">
     <ng-container matColumnDef="Time">
       <th mat-header-cell *matHeaderCellDef> <span>Time</span> </th>

src/app/cards/hourly-forecast/hourly-forecast.component.ts

@@ -1,33 +1,24 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { WeatherData } from 'src/app/models/weather-data/weather-data';
-import { Store } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
 import { AppState, selectWeather } from 'src/app/reducers';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-hourly-forecast',
   templateUrl: './hourly-forecast.component.html',
   styleUrls: ['./hourly-forecast.component.css']
 })
-export class HourlyForecastComponent implements OnInit, OnDestroy {
+export class HourlyForecastComponent implements OnInit {
 
   displayedColumns: string[] = ['Time', 'Temp', 'Wind', 'Condition'];
 
-  data: WeatherData;
-  private unsubscribeWeather: Subject<void> = new Subject<void>();
+  data$: Observable<WeatherData>;
 
   constructor(private store: Store<AppState>) { }
 
   ngOnInit(): void {
-    this.store
-      .select(selectWeather)
-      .pipe(takeUntil(this.unsubscribeWeather))
-      .subscribe((weather) => this.data = weather);
-  }
-
-  ngOnDestroy() {
-    this.unsubscribeWeather.next();
+    this.data$ = this.store.pipe(select(selectWeather));
   }
 
 }

src/app/cards/weather-discussion/weather-discussion.component.html

@@ -1,4 +1,4 @@
-<div class="weather-discussion" *ngIf="data != undefined; else elseBlock">
+<div class="weather-discussion" *ngIf="data$ | async as data; else elseBlock">
   <mat-accordion>
     <mat-expansion-panel *ngFor="let week of data.weeklyForecast">
       <mat-expansion-panel-header>

src/app/cards/weather-discussion/weather-discussion.component.ts

@@ -1,31 +1,22 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { WeatherData } from 'src/app/models/weather-data/weather-data';
-import { Store } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
 import { AppState, selectWeather } from 'src/app/reducers';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-weather-discussion',
   templateUrl: './weather-discussion.component.html',
   styleUrls: ['./weather-discussion.component.css']
 })
-export class WeatherDiscussionComponent implements OnInit, OnDestroy {
+export class WeatherDiscussionComponent implements OnInit {
 
-  data: WeatherData;
-  private unsubscribeWeather: Subject<void> = new Subject<void>();
+  data$: Observable<WeatherData>;
 
   constructor(private store: Store<AppState>) { }
 
   ngOnInit(): void {
-    this.store
-      .select(selectWeather)
-      .pipe(takeUntil(this.unsubscribeWeather))
-      .subscribe((weather) => this.data = weather);
-  }
-
-  ngOnDestroy() {
-    this.unsubscribeWeather.next();
+    this.data$ = this.store.pipe(select(selectWeather));
   }
 
 }

src/app/cards/weekly-forecast/weekly-forecast.component.html

@@ -1,5 +1,5 @@
 <div class="forecast-tile">
-  <table class="table-responsive-sm" *ngIf="data != undefined; else elseBlock">
+  <table class="table-responsive-sm" *ngIf="data$ | async as data; else elseBlock">
     <tbody>
       <td *ngFor="let weekday of data.weeklyForecast">
         <tr class="name">{{weekday.name}}</tr>

src/app/cards/weekly-forecast/weekly-forecast.component.ts

@@ -2,30 +2,21 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { WeatherData } from 'src/app/models/weather-data/weather-data';
 import { Store, select } from '@ngrx/store';
 import { AppState, selectWeather } from 'src/app/reducers';
-import { map, takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-weekly-forecast',
   templateUrl: './weekly-forecast.component.html',
   styleUrls: ['./weekly-forecast.component.css']
 })
-export class WeeklyForecastComponent implements OnInit, OnDestroy {
+export class WeeklyForecastComponent implements OnInit {
 
-  data: WeatherData;
-  private unsubscribeWeather: Subject<void> = new Subject<void>();
+  data$: Observable<WeatherData>;
 
   constructor(private store: Store<AppState>) { }
 
   ngOnInit(): void {
-    this.store
-      .select(selectWeather)
-      .pipe(takeUntil(this.unsubscribeWeather))
-      .subscribe((weather) => this.data = weather);
-  }
-
-  ngOnDestroy() {
-    this.unsubscribeWeather.next();
+    this.data$ = this.store.pipe(select(selectWeather));
   }
 
 }