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><ulclass="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><arouterLink="one"><imgng-src="images/icon.png"src="{{image}}"></a></li><li><arouterLink="two">two</a></li><li><arouterLink="three">three</a></li><li><arouterLink="four">four</a></li><li><arouterLink="five">five</a></li><li><arouterLink="six">six</a></li></ul>

App.ts

exportclassApp {
  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;
}