title: MediaObserver vs BreakpointObserver - what are the differences?
body: <p>After doing some searching, I came to realize that I'm supposed to use the <a href="https://github.com/angular/flex-layout" rel="noreferrer">Flex-Layout</a> library to make Material-themed UI responsive (as answered <a href="https://stackoverflow.com/questions/45290746/is-angular-4-material-responsive-like-bootstrap">here</a>). And according to the <a href="https://github.com/angular/flex-layout/wiki/API-Documentation" rel="noreferrer">documentation</a>, this library provides the <code>MediaObserver</code> class to programmatically detect media query activation.</p>
  <p>I used the material schematics command -</p>
  <pre><code>ng g @angular/material:navigation shell/layout
  </code></pre>
  <p>to add a <code>Sidenav</code> component, and noticed the following generated code -</p>
  <pre class="lang-js prettyprint-override"><code>export class LayoutComponent {
      isHandset$: Observable&lt;boolean&gt; = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
          map(result =&gt; result.matches),
          shareReplay()
      );
  
      constructor(private breakpointObserver: BreakpointObserver) { } 
  }
  </code></pre>
  <p>It is using the <code>BreakpointObserver</code> class and predefined <code>Breakpoints</code> from <code>@angular/cdk/layout</code> package to detect viewport changes. And the <a href="https://material.angular.io/cdk/layout/overview" rel="noreferrer">documentation</a> says -</p>
  <blockquote>
  <p>The layout package provides utilities to build responsive UIs that
  react to screen-size changes.</p>
  </blockquote>
  <p>So, apparently, there are two different libraries available for making Material-themed UI responsive and they use different approaches. (Please correct me if I'm wrong).</p>
  <p>I'd like to know -</p>
  <ul>
  <li>From usage perspective what are the differences between these two libraries/packages, that is, when to use which?</li>
  <li>Does <code>MediaObserver</code> uses <code>BreakpointObserver</code> under-the-hood?</li>
  <li>If I use Flex-Layout, should I avoid <code>@angular/cdk/layout</code> utilities altogether? Are there some best practices to follow in this regard?</li>
  </ul>
  <p><strong>Edit: 2020.05.11</strong><br />
  According to the source code of <code>MediaObserver</code>, it doesn't use the <code>BreakpointObserver</code> under-the-hood. It uses the native <code>Window.matchMedia()</code> API instead.</p>