Feature Request: Media Query Service

Background

One of the core concepts in bootstrap are the media queries (sm, md, lg, xl) where you can conditionally show/hide elements based upon the browser size.

Proposal

Expose a service where users can get the media query as an observable

// media query types
export enum NgbMediaQueryOption { xs, sm, md, lg }

// service to provide access
export class NgbMediaQueryService {
  getMediaQuery(): Observable<NgbMediaQueryOption> { ... }
}

// sample usage
@Component({ ... })
export class SampleComponent implements OnInit{
  isXs: Observable<boolean>
  constructor(private media: ngbMediaQueryService) {}
  ngOnInit() {
    this.isXs = this.media.getMediaQuery()
      .map(m => m === NgbMediaQueryOption.xs);
  }
}

Future Considerations

Create corresponding directives that could internally use this above service for example…
ngbIfXs – to only show in xs view
ngbIfHideXs – to hide only in xs view

Allow configuration values to override the default media query breakpoints

1 possible answer(s) on “Feature Request: Media Query Service

  1. It is an interesting idea indeed. Having said this it will have to wait till we are done with animations, accessibility and keyboard navigation for core components. Unless someone is willing to work on it right now 🙂