title: Angular Material: BreakpointObserver not available from load?
body: <p>While using the Angular <code>BreakpointObserver</code> in conjunction with <code>Angular Material</code>, I try to use Material Design-spec breakpoints (they're defined in <code>Breakpoints</code>, for example <code>Breakpoints.LandscapePortrait</code>, <code>Breakpoints.HandsetPortrait</code>).</p>
  
  <p>The breakpointObserver works, except for when I freshly load the page. The breakpointObserver is only triggered <em>after</em> a change is observed, but considering it's a fresh load, there is no change yet. This means the initial viewport is not yet evaluated against the breakpoints. I've tried using a single <code>BreakpointObserver.isMatched</code> in <code>OnInit</code>, but this does not seem to take any effect.</p>
  
  <p>I included <code>BreakpointObserver</code>, <code>Breakpoints</code> and <code>MediaMatcher</code> into a shared service, to which I subscribe in all the components that need to "listen" to the breakpoints.</p>
  
  <p>My question is: how can I make sure that the breakpoints are evaluated before the first viewport-change (which may not happen at all, if the user does not resize the window/change device orientation)?</p>
  
  <p>Here's the code of my <code>shared.service.ts</code>:</p>
  
  <pre><code>import {Component, OnDestroy, OnInit, Injectable,Input,Output,EventEmitter} from '@angular/core';
  import {BreakpointObserver, Breakpoints, MediaMatcher} from '@angular/cdk/layout';
  
  @Injectable()
  export class SharedService implements OnDestroy, OnInit {
      public isCollapsed = false;
      public isOpen = false;
      public isMobileView = false;
      public isTabletView = false;
      private breakpointObserver: BreakpointObserver;
      @Output() mediaChange = new EventEmitter();
      constructor(breakpointObserver: BreakpointObserver) {
          this.breakpointObserver = breakpointObserver;
          // check if the viewport matches Material Design-spec handset displays
          this.breakpointObserver.observe([
            Breakpoints.HandsetPortrait
          ]).subscribe(result =&gt; {
            if (result.matches) {
              this.isMobileView = true;
              this.isTabletView = false;
              this.isOpen = false;
              this.isCollapsed = false;
            }
            else {
              this.isMobileView = false;
              this.isOpen = true;
              this.isCollapsed = false;
            }
            this.mediaChanged();
          });
          // check if the viewport matches Material Design-spec tablet displays
          this.breakpointObserver.observe([
            Breakpoints.TabletPortrait
          ]).subscribe(result =&gt; {
            if (result.matches) {
              this.isTabletView = true;
              this.isMobileView = false;
              this.isOpen = true;
              this.isCollapsed = true;
            }
            else {
              if(!this.isMobileView){
                  this.isOpen = true;
              }
              this.isTabletView = false;
              this.isCollapsed = false;
            }
            this.mediaChanged();
          });
      }
      mediaChanged() {
          this.mediaChange.emit({
            "isMobileView" : this.isMobileView,
            "isTabletView" : this.isTabletView,
            "isCollapsed" : this.isCollapsed,
            "isOpen" : this.isOpen
        });
      }
      ngOnInit() {
          // MY ATTEMPT
          // Running the same checks as the observer, but this time on init(?)
          // does not seem to take any effect
          if(this.breakpointObserver.isMatched([
            Breakpoints.HandsetPortrait
          ])){
              this.isMobileView = true;
              this.isTabletView = false;
              this.isOpen = false;
              this.isCollapsed = false;
          }
          if(this.breakpointObserver.isMatched([
            Breakpoints.TabletPortrait
          ])){
              this.isTabletView = true;
              this.isMobileView = false;
              this.isOpen = true;
              this.isCollapsed = true;
          }
          this.mediaChanged();
      }
  }
  </code></pre>