fxHide & fxShow not working about flex-layout

[ThomasBurleson]

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

[IK-Hwan]

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

[ThomasBurleson]

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

[ThomasBurleson]

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.

[jt-helsinki]

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;
  }
}

[ThomasBurleson]

@paistipoikka - see the fxShow & fxHide working here:

• Unit Test
• Plunkr Demo

[jt-helsinki]

@ThomasBurleson That's not working in the Plunkr.

[ThomasBurleson]

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

[jt-helsinki]

Nice! 👍

[fdambrosio]

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'"

[ThomasBurleson]

@fdambrosio - please report a new issue.

[SamiHK]

@ThomasBurleson I have Angular latest version 6.1.2 and fxHide and fxShow are not working.

[CaerusKaru]

@SamiHK If this is still a problem, please open a new issue with a demo and/or minimal reproduction.