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, in turn, 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].

For example to add mediaQueries that activate when printing:

- custom-breakpoints.ts -

import {RAW_DEFAULTS} from '@angular/flex-layout';

const PRINT_BREAKPOINTS = [{
  alias: 'xs.print',
  suffix: 'XsPrint',
  mediaQuery: 'print and (max-width: 297px)',
  overlapping: false
}];

export const CustomBreakPointsProvider = { 
  provide: BREAKPOINTS,
  useValue: [...RAW_DEFAULTS,...PRINT_BREAKPOINTS];
};

- my-app-module.ts -

import { CustomBreakPointsProvider } from 'custom-breakpoints.ts';

@NgModule({
  imports : [
    CommonModule,
    FlexLayoutModule,
  ]
  providers: [
    CustomBreakPointsProvider,     // Adds breakpoints for 'print' mediaQueries
  ]
})
export class MyAppModule {
}

With the above changes, when printing on mobile-sized viewports the 'xs.print' mediaQuery will activate.