Flex-layout: Creating a custom breakpoint for fxFlex is not working

Created on 18 Apr 2018 · 4Comments · Source: angular/flex-layout

Bug, feature request, or proposal:

Creating a custom breakpoint for fxFlex is not working

What is the expected behavior?

After implementing custom break point for and creating a directive for it, I should be able to use said directive in a tag and it should adhere to the values given.

for example I have created a directive for fxFlex.xxs while maintaining the defaults for existing breakpoints.

What is the current behavior?

new directive does not have any effect. curious if default breakpoint of flexFx.xs will override my custom breakpoint of flexFx.xxs

What are the steps to reproduce?

create a breakpoint according to documentation

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

const XXS_BREAKPOINTS = [{
  alias: 'xxs',
  suffix: 'flexXxs',
  mediaQuery: 'screen and (max-width: 395px)',
  overlapping: false
}];


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

add to app.module.ts in providers section

3.create new directive for new breakpoint

import {Directive, ElementRef, Input} from '@angular/core';
import { MediaMonitor, negativeOf, FlexDirective, LayoutDirective, StyleUtils} from '@angular/flex-layout';


@Directive({
  selector: `[fxFlex.xxs]`
})
export 
class CustomXxsDirective extends FlexDirective {
  constructor(monitor: MediaMonitor, elRef: ElementRef, _container: LayoutDirective,styleUtils: StyleUtils) {
    super(monitor, elRef, _container,styleUtils,true);
    console.log('here')
  }

  @Input('fxFlex.xxs')   set flexXxs(val)  { this._cacheInput('flexXxs', val); };
}

add directive to declarations so that it can be used.
use as you would any othe fxFlex directive

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

flex-layout 5.0.0-beta.14

Other things of note

I also disabled default break points to see if they were conflicting with my new breakpoint. That also did not work.

bug demo

Source

jcoronel94

Most helpful comment

Ok, I can see how the docs are a little confusing here. You have two choices:

Instead of fxFlex.xss, use fxFlex.flexXxs as you have defined above
Omit the suffix field from your breakpoints definition

CaerusKaru on 22 Apr 2018

👍2

All 4 comments

Please provide a StackBlitz reproduction we can investigate.

CaerusKaru on 19 Apr 2018

@CaerusKaru
https://stackblitz.com/edit/angular-ltjzwn

My thought is when we decrease the screen width below 395 px, the boxes should wrap one per row.
see line 14 in app.component html.

I thought maybe the flexFx.xs directive was superceeding my custom directive but when i turn off default breakpoints my custom directive still doesn't work

jcoronel94 on 19 Apr 2018

Ok, I can see how the docs are a little confusing here. You have two choices: