如何隐藏导航默认，单击显示，如何将类添加到图像和div角度

我正在进行菜单导航。 我有一个菜单图标我想添加类来从主css文件控制它。

页面加载时我想隐藏导航。 当我点击图标时，我想显示导航。 当我从导航鼠标中删除时，我应该隐藏。 我很困惑如何从哪个文件调用css，我必须在app.component.ts或其中编写click事件。 我必须在角4.0中做所有这些事情。

Thanks in advance.  
 <!--
 Sign Up
--> <!--
 Login
--> 
 
two
 
three
 
four
 
five
 
six
 
 export class NavComponent implements OnInit { name:string; show:string; constructor() { this.name = 'Angular 2 Ng Class'; this.show = "true"; } ngOnInit() { } logout(){ this.show = "true"; } } 

Answer 1

对不起，我误解了这个问题。这是一个同样的工作的傻瓜。

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

模板

 XXXX 
   
 
two
 
three
 
four
 
five
 
six
  

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