Flex-layout: fxHide & fxShow not working

Created on 21 Dec 2016 · 13Comments · Source: angular/flex-layout

Hi,

if I try to set up a responsive menu using [fx-hide] / [fx-show] the properties of the

do not get updated as the component property changes state. In other words, when the state changes from true--> false --> true it appears that the underlying state is not being reflected in the

Here's are the relevant snippets of code:

<button class="nav-trigger" 
            (click)="toggleMenu(!menuOpen)" 
            color="primary" 
            md-icon-button>
     <md-icon class="md-24">menu</md-icon>
</button>

<div fx-layout="row" fx-show="true" [fx-show.xs]="menuOpen">blah</div>

private menuOpen: boolean = true;


toggleMenu(show: boolean) {
        this.menuOpen = show;

    }

Hope this helps

bug in-progress

Source

jt-helsinki

All 13 comments

Please provide a CodePen or Plunkr that demonstrates the issue. Here is a Plunkr template

ThomasBurleson on 21 Dec 2016

The API has changed (and all the docs):

fx-layout should be fxLayout
fx-show should be fxShow

Here is a your Code Plunkr demonstrating the issue.

ThomasBurleson on 21 Dec 2016

Hi @ThomasBurleson

Thanks for coming back so quickly. The toggle was happening up in the form using the '!' in toggleMenu(!menuOpen).

It seems the button in the Plunkr is not working either. fxShow is reading the property. Just not showing anything.

import {Component} from '@angular/core'

@Component({
  selector: 'test-app',
  template: `
<button class="nav-trigger" 
            (click)="toggleMenu()" 
            color="primary" 
            md-icon-button>
     Toggle Button
</button>

<div fxLayout="row" 
    [fxShow]="menuOpen"
    fxShow.xs="true"
    style="margin-top:25px;background-color:#d9edf7">
  I should hide and show
</div>  `,
})
export class TestApp {
 private _menuOpen: boolean = true;

  toggleMenu(show: boolean) {
      this.menuOpen = !this.menuOpen;
  }

  set menuOpen(_menuOpen: boolean) {
    console.log(_menuOpen);
    return this._menuOpen = _menuOpen;
  }

  get menuOpen(): boolean {
    console.log(this._menuOpen);
    return this._menuOpen;
  }
}

jt-helsinki on 22 Dec 2016

@paistipoikka - The Plunkr is not working because you discovered a pre-Beta bug ;-).

ThomasBurleson on 22 Dec 2016

😄1

@paistipoikka - see the fxShow & fxHide working here:

ThomasBurleson on 22 Dec 2016

@ThomasBurleson That's not working in the Plunkr.

jt-helsinki on 22 Dec 2016

@paistipoikka - It is working now... just make sure the result view pane is > xs viewport size.

ThomasBurleson on 22 Dec 2016

Nice! 👍

jt-helsinki on 22 Dec 2016

I'm using angular 2.1.0 and flex-layout alpha and we can't upgrade because we've started using https://github.com/qdouble/angular-webpack2-starter
so now fx-layout & fx-flex works but fxShow & fxHide don't

<div [fxShow]="menuOpen"
     fxShow.xs="true"
     style="margin-top:25px;background-color:#d9edf7">
  I should hide and show
</div>

return this error
"Uncaught (in promise): Error: Template parse errors:
Can't bind to 'fxShow' since it isn't a known property of 'div'"

fdambrosio on 4 Jan 2017

@fdambrosio - please report a new issue.

ThomasBurleson on 4 Jan 2017


 <div id="sideBar" fxLayout="column" fxFlex="202px" fxShow="{{sideBarOpen?'true':'false'}}">

export class MainpageComponent implements OnInit {
  sideBarOpen: boolean = true;

  private sideControlToggle() {
    this.sideBarOpen = !this.sideBarOpen;
  }
}

Good luck to you.....