Customize angular layout breakpoints

Question

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

  this.breakpointObserver.observe([Breakpoints.Handset,
  Breakpoints.HandsetLandscape,
  Breakpoints.HandsetPortrait,])
  .subscribe(result => {

    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("screens matches handset");
    }
    else if (this.breakpointObserver.isMatched('(min-width: 1600px)')){
      console.log('widescreen');
      this.widescreenView = true;
    }    
  });

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!

Answer 1

I was going about it wrong, in case anyone wants to know the answer or it's helpful for someone, there's no need to create a new breakpoint or edit, you can set a specific width to the breakpoint observer so it observes that specific width, this worked for me

this.breakpointObserver.observe([Breakpoints.Handset,
Breakpoints.HandsetLandscape,
Breakpoints.HandsetPortrait,
'(min-width: 1600px)'])
.subscribe(result => {

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("screens matches handset");
}
else if (this.breakpointObserver.isMatched('(min-width: 1600px)')){
  console.log('widescreen');
  this.widescreenView = true;
}    
});