title: Customize angular layout breakpoints
body: <p>I'm currently working on a site's responsiveness and one of the requirements is to have content centered after the screen gets to 1600px, which is not a breakpoint predefined in Angular cdk layout, trying to have a custom breakpoint at that width so the breakpoint observer adjusts to the specific css code for that layout, currently have this on the ts file and the current solution only works if the page is reloaded when the screen is above 1600px</p>
  <pre><code>  this.breakpointObserver.observe([Breakpoints.Handset,
    Breakpoints.HandsetLandscape,
    Breakpoints.HandsetPortrait,])
    .subscribe(result =&gt; {
  
      this.handsetView = false;
      this.widescreenView = false;
      const breakpoints = result.breakpoints;
  
      if (breakpoints[Breakpoints.Handset] || breakpoints[Breakpoints.HandsetLandscape]
        || breakpoints[Breakpoints.HandsetPortrait]) {
        this.handsetView = true;  
        console.log(&quot;screens matches handset&quot;);
      }
      else if (this.breakpointObserver.isMatched('(min-width: 1600px)')){
        console.log('widescreen');
        this.widescreenView = true;
      }    
    });
  </code></pre>
  <p>since it's not one of the predefined breakpoints it won't adjust when going from less than 1600px to 1600px and above, guess just need a way for that 1600px mark to be observed. Any help is appreciated!</p>