title: How to hide and show sidenavbar in angular2
body: <p>I am trying show and hide navbars in angular 2 but this is not working right now,
  my temmplate,</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom:0px !important;"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a id="menu-toggle" (click)="show()" class="navbar-toggle"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/a&gt;
        &lt;a class="navbar-brand" href="home.xhtml"&gt;
          &lt;img src="images/socialwiki.png"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div  *ngIf="hide" id="sidebar-wrapper"  class="sidebar-toggle"&gt;
  
        &lt;ul class="sidebar-nav"&gt;
           &lt;li&gt;
                &lt;a onclick="profilelink('login')"&gt;&lt;i class="icon-signin"&gt;&lt;/i&gt;login&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a onclick="profilelink('profile')"&gt;&lt;i class="iconwidth icon-user"&gt;&lt;/i&gt;Profile&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a onclick="profilelink('socialaddress')"&gt;Social Address&lt;i class="icon-share"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a onclick="profilelink('custominfo')"&gt;&lt;i class="icon-info-sign"&gt;&lt;/i&gt;Custom Info&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a onclick="profilelink('mysociety')"&gt;&lt;i class="icon-users"&gt;&lt;/i&gt;My Society(All)&lt;/a&gt;
  
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a onclick="profilelink('myprofile')"&gt;&lt;i class="iconwidth icon-user"&gt;&lt;/i&gt;My Profile&lt;/a&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My ts,</p>
  
  <pre><code> export class Navbar {
  hide:any = false;
  show():any{
      alert("hi");
      this.hide = true;
  }
  </code></pre>
  
  <p>I am getting the alert message but unable to show the side bar,can someone suggest help please..................</p>