@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?

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

@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?

@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.

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
  }
});

@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.