feat(media queries): add Media Query Service

[Brocco]

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 MediaQueryOption { xs, sm, md, lg }

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

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

Future Considerations

Create corresponding directives that could internally use this above service for example...
IfXs - to only show in xs view
IfHideXs - to hide only in xs view

Allow configuration values to override the default media query breakpoints