How to customise FlexDirective with custom breakpoints?

I have defined a set of custom breakpoints and have successfully managed to create custom directives for:

• LayoutDirective
• ShowHideDirective

However, I ran into a problem when trying to customise the FlexDirective. A snippet of my customised code looks like this

import { FlexDirective, LayoutDirective, StyleUtils, MediaMonitor } from '@angular/flex-layout';
import { LAYOUT_CONFIG, LayoutConfigOptions } from '@angular/flex-layout/core';

@Directive({
  selector: `
    [fxFlex.mobile],
    [fxFlex.s.tablet],
    [fxFlex.l.tablet],
    [fxFlex.l.tablet.landscape],
    [fxFlex.web]
  `
})
export class CustomFlexDirective extends FlexDirective {
  constructor(monitor: MediaMonitor,
              elRef: ElementRef,
              @Optional() @Self() layout: LayoutDirective,
              styleUtils: StyleUtils,
              @Inject(LAYOUT_CONFIG) layoutConfig: LayoutConfigOptions) {
    super(monitor, elRef, layout, styleUtils, layoutConfig);
  }

  ...
}

The problem I get is that the elements LAYOUT_CONFIG and LayoutConfigOptions do not seem to be available anywhere - the import for LAYOUT_CONFIG and LayoutConfigOptions fails. I also did a search across all of @angular/flex-layout in my node_modules folder and could not find these anywhere.

[simeyla]

The documentation for custom breakpoints really needs to be made clearer with better examples, and explanation on overriding defaults.

The default breakpoints for tablet sized devices are 600 and 960 and the width of an iPad (most of them) is 768. So 600 is way too small and 960 won’t get triggered.

So many people will be wanting to add a breakpoint corresponding to that size and the documentation essentially just talks about printing breakpoints.

[MarcusMorba]

Totally agree to @simeyla . An example with modifying the default breakpoints and adding additional ones and add e.g. a “lt-xl”-directive would be very useful.