Update wiki to reflect change for MediaObserver made in beta 24

[Gustav0ar]

Bug Report

What is the expected behavior?

To wiki show the correct way to be used now.

What is the current behavior?

I updated to latest beta 24, and saw that $media got deprecated, but docs still shows the old way for listening for MediaChange (using it).
I couldn't find a way to get the asObservable from MediaObserver that is not from $media like it shows in changelog.
What is the proper way to do it? The wiki needs to be updated to reflect this change

[Gustav0ar]

@CaerusKaru I saw in another issue that you are rebuilding the docs. In the meanwhile, can you post here how to solve this issue that I'm facing?

[jwhollingsworth]

While media$ is an Observable<MediaChange>, asObservable returns Observable<MediaChange[]>. In the source, media$ is mapped to the first item in the MediaChange array, so you could optionally, do the exact same thing:

this.watcher = mediaObserver.media$.subscribe((change: MediaChange) => {
  this.activeMediaQuery = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
  if ( change.mqAlias == 'xs') {
     this.loadMobileContent();
  }
});

becomes:

this.watcher = mediaObserver.asObservable()
  .pipe(
    filter((changes: MediaChange[]) => changes.length > 0),
    map((changes: MediaChange[]) => changes[0])
  ).subscribe((change: MediaChange) => {
    this.activeMediaQuery = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
    if ( change.mqAlias == 'xs') {
      this.loadMobileContent();
    }
  });

Obviously there are many ways to handle it, the big change is you now get an array of changes

[chriszrc]

@jwhollingsworth Forgive me, but why would mediaObserver publish events where the value would be an empty array? Do we really need to filter for that condition?

[jwhollingsworth]

@chriszrc If I remember correctly, that was just how the source code at the time mapped between the two. It had the filter, and I just copy and pasted it. No clue what use case that handles other than being extra careful.

[tonysamperi]

I believe that Wiki is now updated.
For the ones still using an older version (7.0.0-beta.19 in my case),

import { MediaObserver } from "@angular/flex-layout";

will throw an error like module has not such exported member

you'll need to use

import { MediaService } from "@angular/flex-layout";
// ...
mediaObserver.media$
.pipe(takeUntil(this._subCtrl$))
.subscribe((change: MediaChange) => {
 // mqAlias contains xs, sm, md, lg
  if ( change.mqAlias == "xs") {
     // DO STUFF
  }
});

[jptinsman]

@tonysamperi The documentation is still not updated (https://github.com/angular/flex-layout/wiki/API-Documentation) and shows how to use the deprecated media$.subscribe. Your example also does not answer the original poster's request on how to use the asObservable() that the deprecation statement says to use.