BreakPoints

The token BREAKPOINTS is an opaque token in @angular/flex-layout that is used to build a Provider for a raw list of breakpoints.

import {OpaqueToken} from '@angular/core';

export const BreakPointsProvider = { 
  provide: BREAKPOINTS,
  useValue: RAW_DEFAULTS
};

@NgModule({
  providers: [
    BreakPointsProvider,     // Supports developer overrides of list of known breakpoints
 // BreakPointRegistry,      // Registry of known/used BreakPoint(s)
 // MatchMedia,              // Low-level service to publish observables w/ window.matchMedia()
 // MediaMonitor,            // MediaQuery monitor service observes all known breakpoints
 // ObservableMediaProvider  // easy subscription injectable `media$` matchMedia observable
  ]
})
export class MediaQueriesModule {
}

This provider is used to return a list to ALL known BreakPoint(s)... and this list is used internally to register mediaQueries and announce mediaQuery activations.

Custom BreakPoints

Using the BREAKPOINTS OpaqueToken, developers can add custom breakpoints or easily override existing breakpoints.

NOTE: !! custom breakpoints lists MUST contain the following aliases & suffixes: [xs, gt-xs, sm, gt-sm, md, gt-md, lg, gt-lg, xl].