fxShow no longer works

[buu700]

Bug Report

What is the expected behavior?

fxShow should set display: none when set to false.

What is the current behavior?

Given code similar to the following:

balls = new BehaviorSubject<boolean>(false);

. . .

<div fxFlex [fxShow]='balls | async' [class.balls]='balls | async'></div>

The div is rendered with no class set (expected) and display set to flex (not expected).

What are the steps to reproduce?

No idea. My attempt at reproducing in StackBlitz was unsuccessful: https://stackblitz.com/edit/angular-kkeccq?file=src%2Fapp%2Fapp.component.html

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

Correctness.

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

Reproduced in desktop Chrome and a Chrome webview (Cordova) on Android 8.1.

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.1
Node: 8.11.3
OS: linux x64
Angular: 6.1.0
... animations, common, compiler, compiler-cli, core, elements
... forms, http, platform-browser, platform-browser-dynamic
... platform-server, platform-webworker
... platform-webworker-dynamic, router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.7.1
@angular-devkit/architect-cli      0.7.1
@angular-devkit/build-angular      0.7.1
@angular-devkit/build-ng-packagr   0.7.1
@angular-devkit/build-optimizer    0.7.1
@angular-devkit/build-webpack      0.7.1
@angular-devkit/core               0.7.1
@angular-devkit/schematics         0.7.1
@angular-devkit/schematics-cli     0.7.1
@angular/cdk                       6.4.2
@angular/cdk-experimental          6.4.2
@angular/cli                       6.1.1
@angular/flex-layout               6.0.0-beta.17
@angular/material                  6.4.2
@angular/tsc-wrapped               4.4.6
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.1.1
@schematics/angular                0.7.1
@schematics/schematics             0.7.1
@schematics/update                 0.7.1
ng-packagr                         3.0.6
rxjs                               6.2.2
typescript                         2.9.2
webpack                            4.16.3

Is there anything else we should know?

6.0.0-beta.17 regression — works fine when I downgrade to 6.0.0-beta.16.

[jotatoledo]

Maybe try to reproduce it in a public git repo and add it to your issue report?

[TdoubleG]

Same problem with the current version "beta.17"

[CaerusKaru]

I'm going to consolidate this into #848. The reason this is happening is because we're adding display: flex indiscriminately in certain cases. A temporary workaround may be to use FlexLayoutModule.withConfig({addFlexToParent: false}), although that may not fix every issue. This is unfortunately more complicated that it may seem, which I'll elaborate on in #848

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