How to customise FlexDirective with custom breakpoints?

[Mufasa]

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.

[CaerusKaru]

Can you provide either a minimal reproduction repository, or a StackBlitz example?

[Mufasa]

Here is a StackBlitz example that I was developing: https://stackblitz.com/edit/flexlayout-eg9xpj

You can see that it currently doesn't compile because it cannot resolve the LAYOUT_CONFIG and LayoutConfigOptions in the file src/app/custom-flex.directive.ts.

[CaerusKaru]

You need to upgrade to version 6.0.0-beta.16

[Mufasa]

D'oh!

Thanks for pointing that out - it is now working.

[Mufasa]

@CaerusKaru
A new issue has now appeared. If you look at the same StackBlitz example you will see that DISABLE_DEFAULT_BREAKPOINTS is no longer available in src/app/app.module.ts.

This used to work as documented in your Wiki (https://github.com/angular/flex-layout/wiki/Breakpoints) in the previous 6.0.0-beta.15 release.

I have raised this as a new issue: #770

[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.

[ndl7]

Agreed. Couldn't find a single complete guide or article on how to implement custom breakpoints. Does anyone have a working StackBlitz for Angular 7?

Edit: I've used this - https://stackblitz.com/edit/flexlayout-eg9xpj?file=src%2Fapp%2Flayout.service.ts line for line, updated with MediaObserver, but it doesn't work for me. No errors, Layout Service saying there's been a MediaChange, but the layouts do not actually change.

Edit2: I've updated the previous StackBlitz example to 7.0.0-beta.23 and it works on StackBlitz, so must be something in my code. https://stackblitz.com/edit/flexlayout-kats7k?file=package.json

Edit3: I rest my case - back to CSS, until there is a complete example for Angular 7 somewhere.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}