fxLayoutGap in responsive mode breaks without original non-breakpoint value provided

[Londovir]

Bug Report

When using a breakpoint-related attribute of fxLayoutGap, such as fxLayoutGap.gt-sm, without providing a default/normal value, combined with dynamically generated items (via ng-container), the following error is thrown:

Cannot read property 'endsWith' of undefined (flex.js: 233)

This was previously likely the same as Issue #1233, which was closed due to failure to reproduce. However, I can provide a very simple reproduction (see below) which consistently triggers this on flex-layout 11.0.0.-beta.33 in this specific situation. (Note: The reproduction was deliberately written to use *ngFor inside of an ng-container element, even though in this particular instance there's no need for the ng-container, in order to keep the reproduction simple and to the point.)

What is the expected behavior?

fxLayoutGap should only apply the breakpoint enabled margining when it matches, and if no "un-breakpointed" value is provided, should default to nop/0px margin, and should not throw an error in flex.js.

What is the current behavior?

Throws error shown above/below:

Cannot read property 'endsWith' of undefined (flex.js: 233)

What are the steps to reproduce?

Providing a StackBlitz (or similar) is the best way to get the team to see your issue.

• Reproduction

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

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

Angular 11.1 / Flex-layout 11.0.0-beta.33

Is there anything else we should know?

Also referenced in Issue #1011 (and other items noted therein).

[gubo]

i can also confirm this ...

src/lib/flex/layout-gap/layout-gap.ts: 62 if (gapValue.endsWith(GRID_SPECIFIER)) {

could this check if gapValue undefined or null ?

[biltongza]

There's a nifty little workaround on SO: https://stackoverflow.com/questions/60175336/uncaught-typeerror-cannot-read-property-endswith-of-undefined-at-layoutgapsty

To catch undefined layout gap values, implement a custom layout gap builder which translates undefined gap values, e.g.:

import { Injectable, NgModule } from '@angular/core';
import {
  StyleBuilder,
  StyleDefinition,
  LayoutGapParent,
  LayoutGapStyleBuilder,
} from '@angular/flex-layout';

@Injectable()
export class CustomLayoutGapStyleBuilder extends LayoutGapStyleBuilder {
  buildStyles(gapValue: string, parent: LayoutGapParent): StyleDefinition {
      return super.buildStyles(gapValue || '0 px', parent);
  }

  sideEffect(gapValue, _styles, parent) {
      return super.sideEffect(gapValue || '0 px', _styles, parent);
  }

}

and make it available to your application in the @NgModule:

@NgModule({
  //...
  providers: [
    //...
    { provide: LayoutGapStyleBuilder, useClass: CustomLayoutGapStyleBuilder },
  ],
})

also this may be a regression as it was reported in 2019 in #1011

[CaerusKaru]

Pretty sure this will be fixed by #1376. If anyone can check using the latest nightly builds, I would appreciate it. Otherwise, it'll land in the next release.