Angular Material 2 uses changeDetectorRef over their own BreakpointObserver... why?

[Darin Hensley]

For Angular Material 2 Creating a responsive layout for mobile and desktop,

I see they use `changeDetectorRef` in their stackblitz example, instead of their very own Breakpoint observer.

Yes, both do the same thing. But why would Angular Material 2 not want to use their own api which was developed specifically for that use case? Could there reason be a performance increase or more efficient? 

      constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {

        this.mobileQuery = media.matchMedia('(max-width: 600px)');

        this._mobileQueryListener = () => changeDetectorRef.detectChanges();

        this.mobileQuery.addListener(this._mobileQueryListener);

      }

[Michael Prentice]

I would review the docs for https://angular.io/api/core/ChangeDetectorRef

It is not the same thing as the CDK's BreakpointObserver: https://material.angular.io/cdk/layout/overview#breakpointobserver.

For responsive mobile and desktop apps, you may also want to take a look at https://github.com/angular/flex-layout

Michael Prentice

Google Developer Expert

GDG Space Coast

DevIntent