如何在angular2中显示和隐藏侧面菜单

Question

In my application i have to implement hide and show side menu. By default the page menu is open while clicking the toggle menu i have to hide the side menu. How can i implement this.

what i have is:

app.component.html, nav.component.html

 <div class="menu-toggler sidebar-toggler"> <span></span> </div> <ul> <li class="nav-item "> <a class="nav-link nav-toggle"> <i class="icon-diamond"></i> <span class="title">Name</span> <span class="arrow"></span> </a> </li> </ul> 

Myservice.ts

export class GlobalService {
public collapse;

constructor() { }

setValue(val: boolean) {
    this.collapse = val;
}

getValue() {
    return this.collapse;
}

EDIT

app.component.html

<div *ngIf="!toggle()"class="menu-toggler sidebar-toggler">
      <span></span>
</div>

app.component.ts

import { GlobalService } from "path";

export class AppComponent {
toggle() {
this.globalService.setValue(false);

 }
}

how can i hide this list(in nav.html) while clicking menu toggle (app.compnent.html)? Any help will really appreciable. i am new to angular.

Answer 1

If use of service is not the priority then you can simply maintain simple variable to do this task.

Your app.component.ts

    export class AppComponent {
      showMenu : boolean = true;
    }

Your app.component.html

<div (click)="showMenu = !showMenu" class="menu-toggler sidebar-toggler"><span></span>
</div>
<ul *ngIf="showMenu">
    <!-- used showMenu to hide/show -->
    <li class="nav-item  ">
        <a class="nav-link nav-toggle">
            <i class="icon-diamond"></i>
            <span class="title">Name</span>
            <span class="arrow"></span>
        </a>
    </li>
</ul>

hope this helps ...

Answer 2

For this ,

1. You can make a CommonService to store the state of menu or and use that Service to make toggle you menu.

2. You can also use @Input @Output , in case you are having parent child relation between components.

Method will depend on how is your project/file structure.

Answer 3

You can create a service and preferably make a static variable inside to get and set the visibility state of the menu. By this you could directly set and get the variable by using ComponentName.variableName.

to play with the visibility you could use(Sorry if there is any syntax errors) 1> Set the document.getelementbyid("idofelement").display= none or block 2>use *ngIf="someboolean" where you should set the boolean in your ts file