feat: switch to CDK BreakpointsObserver

[CaerusKaru]

We need to migrate to the CDK's layout engine. This means the following:

• Switch to using BreakpointsObserver in MediaMonitor
• Deprecate ObservableMedia/MediaService
• Deprecate MatchMedia
• Add server wrapper for BreakpointsObserver and MediaMatcher
• Update the CDK layout engine as necessary

[MarcusMorba]

@ThomasBurleson : we are currently updating to Angular 5 and want to test custom breakpoints. One thing which worries us is a possible dependence of material2 due to all of the overhead which comes with this and CDK. Can you give feedback which major dependencies are planned in the future for the use of custom breakpoints? Thanks.

[CaerusKaru]

@MarcusMorba Only the CDK is a necessary dependency, due to the use of the CDK's Directionality service (and possibly their Layout service in the future). A dependency on Material is unlikely because it's only a collection of components with Material stylings, which is unnecessary for our agnostic layout library.

[MarcusMorba]

Thanks for your feedback.

[mackelito]

Does this mean that we can use the BreakpointObserver to control fxFlex properties?
I'm currently facing an issue where I want fxFlex="100vh" for handset and then use fxFlex.sm="600px" fxFlex.gt-sm="800px" for desktop.. is this something I can solve once this is implemented?

[CaerusKaru]

@mackelito You might want to think about using the orientation breakpoints provided by this library. This will mostly be an internal-only change, meant specifically to reduce the size of the library source code (and duplicate code between Flex Layout and the CDK)

[mackelito]

@CaerusKaru I did take a look at it last night... sure I could use that.. just that we use the CDK implementation in several other places.. always looking for ways to be more consistent ;)

[alfaproject]

This would be amazeballs. @CaerusKaru are you planning this for a near future?

[ThomasBurleson]

@angular/cdk BreakpointObserver will not replace @angular/flex-layout MediaObserver. MediaObserver is an enhanced version that notifies subscribers of activations for standard AND
overlapping (lt-xxx, gt-xxx) breakpoints.

We are adding the following enhancements to @angular/flex-layout:

• Ensure standard breakpoints mediaQueries are aligned with those in the CDK
• Update MediaObserver
  • isActive() enhanced to support list of aliases to determine if any match
  • properly disconnects subscribers when destroyed

Note: Developers should use MediaObserver (not use MatchMedia) service to observe breakpoint activations! MediaObserver is the recommended service to use for application developers; MatchMedia should be considered a private service.

[angular-automatic-lock-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.}