Search code examples
angularangular-materialangular-flex-layout

Unable to hide the navigation bar in login page in angular 2

I am trying to implement a sample app in Angular using Angular Material and Angular Flex Layout.

I have implemented a navigation bar which i want to hide in login page and visible in all pages in the application.

I have created a service with the name showmenu.service.ts where I have declared a variable and assigned as boolean value. Also defined two functions show() and hide()

I am not getting any error, but I am unable to hide the navigation bar in my login page .

enter image description here

Please access my sample code here ..https://stackblitz.com/edit/sample-login-bm7t1c?file=app%2Fshowmenu.service.ts

Solution

  • I made lot of changes to resolve it.

    Please take a look at this

    working code

    The changes are,

    you need a click event for logout button instead of direct navigation 

    (click)="logout()"

    and the logout method should be like below (to hide the menu and do navigation here). 

    logout()
  {
    this.showmenu.hide();
    this._router.navigate(['myform']);
  }

    also I don't know why [hidden] is not working for you. So i just use the visible property in fxShow to solve your problem. 

     fxShow="{{!showmenu.visible}}"

    Finally we did it :)