Error thrown combining fxLayoutAlign with fxFlex using box syntax

[jfcere]

Bug Report

When using banana-box syntax and combining [fxLayoutAlign] with [fxFlex] with responsive API, reevaluation of flex directives when resizing throws Error: basis.indexOf is not a function if [fxFlex] value type is number.

What is the expected behavior?

[fxFlex] value type number to be evaluated without throwing when combined with [fxLayoutAlign].

What is the current behavior?

Error Error: basis.indexOf is not a function is thrown when [fxFlex] value type is number when combined with [fxLayoutAlign] and directive is reevaluated due to the use of responsive API.

What are the steps to reproduce?

Follow the StackBlitz examples below, and resize the window until layout changes from row to column and lookout for Error: basis.indexOf is not a function error in the console.

<!-- concerned code used in the example -->
<div [fxLayoutAlign]="'end'" [fxFlex]="100">
    third-section
</div>

The error is not thrown using @angular/flex-layout v7.0.0-beta23:
https://stackblitz.com/edit/angular-flex-issue-v700-beta23

The error is thrown using @angular/flex-layout v7.0.0-beta24 and up:
https://stackblitz.com/edit/angular-flex-issue-v700-beta24
https://stackblitz.com/edit/angular-flex-issue-v800-beta26

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

Fix the error happening and enforce consistency as [fxFlex] used alone with value type number is correctly evaluated and works as expected.

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

• Angular 7 with @angular/flex-layout v7.0.0-beta24
• Angular 8 with @angular/flex-layout v8.0.0-beta26

Is there anything else we should know?

The error is not happening if we do not use the banana-box syntax but it was working in @angular/flex-layout v7.0.0-beta.23.

If we change [fxFlex]="100" to [fxFlex]="'100'" to specify that value is a string the error goes away but note that it previously worked without the quotes (and still is if not combined with fxLayoutAlign) and resolved as a percent value.

The error comes from validateBasis function at line 17 because the basis value type is number instead of string and therefore indexOf is not available:

flex-layout/src/lib/core/basis-validator/basis-validator.ts

Lines 14 to 35 in 28bc2ae

	export function validateBasis(basis: string, grow = '1', shrink = '1'): string[] {
	let parts = [grow, shrink, basis];
	let j = basis.indexOf('calc');
	if (j > 0) {
	parts[2] = _validateCalcValue(basis.substring(j).trim());
	let matches = basis.substr(0, j).trim().split(' ');
	if (matches.length == 2) {
	parts[0] = matches[0];
	parts[1] = matches[1];
	}
	} else if (j == 0) {
	parts[2] = _validateCalcValue(basis.trim());
	} else {
	let matches = basis.split(' ');
	parts = (matches.length === 3) ? matches : [
	grow, shrink, basis
	];
	}
	return parts;
	}

[CaerusKaru]

Oh this is nasty. This actually only happens when we explicitly trigger the reflow. Otherwise it works correctly. I'll get a patch in soon.

[CaerusKaru]

Also, this only gets triggered because you have an fxLayoutAlign on the same element, which triggers the faulty method. Again, nasty.