Not all custom responsive directives work as expected

Bug Report

What is the expected behavior?

My customised responsive directives (fxLayout.x, fxHide.x, fxShow.x, fxFlex.x, and fxLayoutGap.x) should work as documented.

What is the current behavior?

• fxLayout.x directives seem to work as documented.
• fxHide.x directives seem to work as documented.
• fxShow.x directives do not seem to fire as expected but I have raised this as a separate issue: https://github.com/angular/flex-layout/issues/758
• fxFlex.x directives do not seem to fire as expected. It always seems to pick the setting from fxFlex="...".
• fxLayoutGap.x directives do not seem to fire as expected. It always seems to pick the setting from fxLayoutGap="...". I have made some notes in the file src/app/app.component.html to note some odd behaviour of this directive although it may be related to error being thrown - see bottom of this issue for details.

What are the steps to reproduce?

StackBlitz example that demonstrates the issues: https://stackblitz.com/edit/flexlayout-eg9xpj

As you widen and narrow the browser window you should see the following custom breakpoints fire (defined in src/app/custom-breakpoints.ts):

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

const MOBILE = '(max-width: 599px)';
const S_TABLET = '(min-width: 600px) and (max-width: 719px)';
const L_TABLET = '(min-width: 720px) and (max-width: 1023px)';
const L_TABLET_LANDSCAPE = '(min-width: 1024px) and (max-width: 1439px)';
const WEB = '(min-width: 1440px)';

const SCREEN_TYPES = {
  MOBILE: `${MOBILE}`,
  S_TABLET: `${S_TABLET}`,
  L_TABLET: `${L_TABLET}`,
  L_TABLET_LANDSCAPE: `${L_TABLET_LANDSCAPE}`,
  WEB: `${WEB}`,
};

export const CUSTOM_BREAKPOINTS = [
  { 'alias': 'mobile', 'mediaQuery': SCREEN_TYPES.MOBILE },
  { 'alias': 's.tablet', 'mediaQuery': SCREEN_TYPES.S_TABLET },
  { 'alias': 'l.tablet', 'mediaQuery': SCREEN_TYPES.L_TABLET },
  { 'alias': 'l.tablet.landscape', 'mediaQuery': SCREEN_TYPES.L_TABLET_LANDSCAPE },
  { 'alias': 'web', 'mediaQuery': SCREEN_TYPES.WEB }
];

However, they only seem to fire correctly for fxLayout.x and fxHide.x directives.

The file src/app/app.component.html contains all the test HTML code.

What is the use-case or motivation for changing an existing behavior?

All these directive should respect custom breakpoints as documented.

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

Flex-Layout v6.0.0-beta.16 Angular 6.0.3 Material 6.2.0 macOS High Sierra v10.13.4 Chrome Version 66.0.3359.181 (Official Build) (64-bit)

Is there anything else we should know?

In addition, if you look in the browsers Console then you will se these errors being reported intermittently as you adjust the browser windows width:

errors.ts:35 ERROR TypeError: Cannot read property 'addFlexToParent' of undefined
    at CustomFlexDirective.FlexDirective._validateValue (flex.ts:167)
    at CustomFlexDirective.FlexDirective._updateStyle (flex.ts:156)
    at eval (flex.ts:126)
    at ResponsiveActivation.eval [as _onMediaChanges] (base.ts:215)
    at ResponsiveActivation._onMonitorEvents (responsive-activation.ts:168)
    at SafeSubscriber.eval [as _next] (responsive-activation.ts:136)
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:270)
    at SafeSubscriber.next (Subscriber.ts:212)
    at Subscriber._next (Subscriber.ts:142)
    at Subscriber.next (Subscriber.ts:102)

[CaerusKaru]

The reason for the error on addFlexToParent is because you’re passing undefined as the last argument in your super call in the CustomFlexDirective. Additionally, the LayoutDirective needs the SkipSelf decorator, not the Self decorator.

I can’t replicate the behavior you’re seeing for the FlexDirective. I am still investigating the other directives, but this may solve most of your issues.

[angular-automatic-lock-bot[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.}