How To Hide Navigation Default, Show On Click, How To Add Class To Image & Div Angular

I am working on menu navigation. I have a menu icon I want to add class to it to control it from main css file. When page loads I want to hide navigation. When I click on icon I w

Solution 1:

Sorry i Misunderstood the Question Here is a Working Plunker for the Same .

https://plnkr.co/edit/ZHd0Ora2fM5rC70GDUMu?p=preview

Template

<button (click)="logout()">XXXX</button>

  <ul class="nav navbar-nav navbar-right" [ngClass]="(show ==='true')?'hide-it':'show-it'">
      <!--<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>-->
      <!--<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>-->
      <li><a routerLink="one"><img ng-src="images/icon.png" src="{{image}}"></a></li>
      <li><a routerLink="two">two</a></li>
      <li><a routerLink="three">three</a></li>
      <li><a routerLink="four">four</a></li>
      <li><a routerLink="five">five</a></li>
      <li><a routerLink="six">six</a></li>
    </ul>

App.ts

export class App {
  name:string;
  show:string;
  constructor() {
    this.name = 'Angular 2 Ng Class';
    this.show = "true";
   }
  logout(){
    this.show = "false";
  }

}

CSS

.show-it {
  visibility: visible;
}

.hide-it {
  visibility: hidden;
}