From 0e7d2e03102d94dbce9f6b3f31a978b11f5dd661 Mon Sep 17 00:00:00 2001
From: Thomas Burleson <ThomasBurleson@Gmail.com>
Date: Tue, 19 Sep 2017 16:09:07 -0700
Subject: [PATCH] fix(demo, media-query-status): should use async pipe with
 ObservableMedia

References #415.
---
 src/demo-app/app/shared/media-query-status.ts | 33 +++++++------------
 1 file changed, 11 insertions(+), 22 deletions(-)

diff --git a/src/demo-app/app/shared/media-query-status.ts b/src/demo-app/app/shared/media-query-status.ts
index 9c15f1a74..7bca5816b 100644
--- a/src/demo-app/app/shared/media-query-status.ts
+++ b/src/demo-app/app/shared/media-query-status.ts
@@ -1,15 +1,15 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {Subscription} from 'rxjs/Subscription';
+import {Component} from '@angular/core';
 
 import {MediaChange} from '@angular/flex-layout';
 import {ObservableMedia} from '@angular/flex-layout';
+import {Observable} from 'rxjs/Observable';
 
 @Component({
   moduleId: module.id,
   selector : 'media-query-status',
   template : `
-    <div class="mqInfo" >
-      <span title="Active MediaQuery">{{  activeMediaQuery }}</span>
+    <div class="mqInfo" *ngIf="change$ | async as change">
+      <span title="Active MediaQuery">{{  buildMQInfo(change) }}</span>
     </div>
   `,
   styles: [
@@ -28,27 +28,16 @@ import {ObservableMedia} from '@angular/flex-layout';
     }`
   ]
 })
-export class MediaQueryStatus implements OnDestroy, OnInit {
-  private _watcher: Subscription;
-  activeMediaQuery: string;
+export class MediaQueryStatus {
+  public change$: Observable<MediaChange> = this.media$.asObservable();
 
   constructor(private media$: ObservableMedia) {
-
-  }
-
-  ngOnInit() {
-    this.watchMediaQueries();
-  }
-
-  ngOnDestroy() {
-    this._watcher.unsubscribe();
   }
 
-  private watchMediaQueries() {
-    this._watcher = this.media$.subscribe((change: MediaChange) => {
-      if (change.mediaQuery.indexOf('orientation') > -1) { return; }
-      let value = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
-      this.activeMediaQuery = value;
-    });
+  public buildMQInfo(change: MediaChange): string {
+    if (change.mediaQuery.indexOf('orientation') > -1) {
+      return '';
+    }
+    return change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
   }
 }