BreakPoints

BREAKPOINT is an injection token in Angular Layout that is used to provide n-number of new breakpoints for use in templates. The value provided can be either a single BreakPoint, or an array of BreakPoints.

import {InjectionToken, NgModule} from '@angular/core';
import {BREAKPOINTS, DEFAULT_BREAKPOINTS, FlexLayoutModule} from '@angular/flex-layout';

export const BreakPointsProvider = { 
  provide: BREAKPOINTS,
  useValue: DEFAULT_BREAKPOINTS,
  multi: true
};

@NgModule({
  imports: [
    ...
    FlexLayoutModule,
  ],
  providers: [
    ...
    BreakPointsProvider,
  ]
})
export class AppModule {
}

This is an example to add mediaQueries that activate when printing:

custom-breakpoints.ts

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

const PRINT_BREAKPOINTS = [{
  alias: 'xs.print',
  suffix: 'XsPrint',
  mediaQuery: 'print and (max-width: 297px)',
  overlapping: false,
  priority: 1001 // Needed if overriding the default print breakpoint
}];

export const CustomBreakPointsProvider = { 
  provide: BREAKPOINT,
  useValue: PRINT_BREAKPOINTS,
  multi: true
};

my-app-module.ts

import {CommonModule, NgModule} from '@angular/core';
import {FlexLayoutModule} from '@angular/flex-layout';
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. Please note that the provider is a multi-provider, meaning it can be provided multiple times and in a variety of presentations. The type signature of BREAKPOINT is the following:

BREAKPOINT = InjectionToken<BreakPoint|BreakPoint[]>

Thus, you can use the token to segment which breakpoints you provide and in which order. For instance, you can provide all print breakpoints in an array called PRINT_BREAKPOINTS and then all mobile breakpoints in another array called MOBILE_BREAKPOINTS. You can also simply provide one additional breakpoint if that's all you need.

Disabling the default breakpoints

To disable the default breakpoints, you simply provide the option in your module definition:

import {NgModule} from '@angular/core';
import {FlexLayoutModule} from '@angular/flex-layout';

@NgModule({
	imports: [
		...
		FlexLayoutModule.withConfig({disableDefaultBps: true}),
	]
})
export class AppModule {}

The default value for this breakpoint is false

Adding the orientation breakpoints

The orientation breakpoints are a set of breakpoints that detect when a device is in portrait or landscape mode. Flex Layout has a set of these that conform to the Material Design spec built-in to the library. They can be found in the ORIENTATION_BREAKPOINTS InjectionToken. To have these added to the default breakpoints, you can provide the option in your module definition as follows:

import {NgModule} from '@angular/core';
import {FlexLayoutModule} from '@angular/flex-layout';

@NgModule({
  imports: [
    ...
    FlexLayoutModule.withConfig({addOrientationBps: true}),
  ]
})
export class AppModule {}

The default value for this value is false

Custom Breakpoints and Directives

It must be noted that simply registering custom breakpoints will not automatically mean that Flex-Layout API will support those as selectors.

In the above example the custom Breakpoint has been registered, but HTML selectors for xs.print will not work automatically. Consider the scenario below where some content should be hidden while printing and other content has different layouts while printing:

<section 
    class="main" 
    fxShow 
    fxHide.xs.print="true"> 
 ... 
</section>

<footer 
    fxLayout="row" 
    fxLayout.xs.print="column"> 
 ... 
</section>

Notice the use of 'xs.print' alias in the selectors above

To enable these custom, responsive selectors, developers must extend the ShowHideDirective and the LayoutDirective as follows.

import {Directive} from '@angular/core';
import {ShowHideDirective} from '@angular/flex-layout';

const selector = `[fxHide.xs.print]`;
const inputs = ['fxHide.xs.print'];

@Directive({selector, inputs})
export class CustomShowHideDirective extends ShowHideDirective {
  protected inputs = inputs;
}