Feature discussion: should we expose matched breakpoints in BreakpointObserver?

Bug, feature request, or proposal:

As of today BreakpointObserver lets us subscribe to breakpoint changes, which is kind of neat.

breakpointObserver.observer(Breakpoints.Tablet).subscribe(state => {
  // state = { matches: true } if tablet breakpoint
});

Sometimes we need to do work when multiple breakpoints match:

breakpointObserver.observer([
  Breakpoints.Tablet,
  Breakpoints.Web
]).subscribe(state => {
  // state = { matches: true } if tablet or web breakpoint
});

And other times, we need to do different work depending on which breakpoint is activated. However, right now state only tells us whether it matches or not. In fact, breakpointObserver.observe() will actually only emit when the given breakpoints match, so state.matches will always be true.

It would be useful know, which of the given breakpoints have matched so we can perform different tasks depending the activated breakpoint:

breakpointObserver.observer([
  Breakpoints.Tablet,
  Breakpoints.Web
]).subscribe(state => {
  switch(state.matches) {
    case Breakpoints.Tablet:
      // do something
      break;
    case Breakpoints.Web:
      // do something else
      break;
  }
});

Is there anything like that planned or maybe an alternative way I’m not aware of? Otherwise, to me it looks like I need to set up multiple subscriptions for different breakpoints so I can perform different tasks.

This can be easily achieved using combineLatest like this:

combineLatest(
  breakpointObserver.observe(Breakpoints.Tablet),
  breakpointObserver.observe(Breakpoints.Web)
).subscribe(state => {
  state[0] // is tablet
  state[1] // is web
});

[0x-r4bbit]

Hi @josephperrott

thank you for getting back to me on this issue.

In the BreakpointObserver service, a separate stream is set up for each provided MediaQuery and then combineLatest is used to give the aggregate matched state for all of the streams. If we provide something to separate them back apart, we are going backwards a bit.

I think it’s great that BreakpointObserver already aggregates all the media queries. And I’m not asking to separate them apart. The subscription behaviour would stay the same just that instead of just knowing whether one of the multiple medias have matched, we’d also know which one has matched.

So all we’d do is passing the information we already have done the line so it’s exposed in the consumer facing API.

Obviously, this is mainly a convenience concern as we can always have multiple observe() calls. But this will also get unnecessarily wordy, especially if you’re dealing with different conditions that apply need to be checked across media matches.

Am I getting this right that

If we provide something to separate them back apart, we are going backwards a bit.

this is the main reason (also apart from the fact that we wouldn’t actually separate again, but just add more information to the existing stream)?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}