title: hide menu when page loads, onclick button show menu, first click show, second click hide, like toggle in angular 4.0
body: <p>I am working on navigation default when page loads navigation should be hide. When I click on icon I want to show navigation like toggle. when I mouse out from navigation I should hide navigation. angular 4.0.</p>
  
  <pre><code>index.html 
  &lt;button class='user_login' (click)='btnResult()'&gt;
    &lt;img src="./assets/menuicon.png" &gt;
  &lt;/button&gt;
  
  nav.component.html
  &lt;ul class="nav navbar-nav navbar-right menu" *ngIf="menu"&gt;
       &lt;li &gt;&lt;a routerLink="one"&gt;one&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a routerLink="two"&gt;two&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a routerLink="three"&gt;three&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a routerLink="four"&gt;four&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a routerLink="five"&gt;five&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a routerLink="six"&gt;six&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  
  
  nav.component.ts
  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-nav',
    templateUrl: './nav.component.html',
    styleUrls: ['./nav.component.css']
  })
  export class NavComponent implements OnInit {
      menu = false;
      constructor() { 
      btnResult(){
      this.menu = true;
      }
    }
    ngOnInit() {
    }
  
  }
  </code></pre>