How to hide and show in angular 4.0

Question

I am trying to switch the menu in angular 4. I have 2 separate components. One for the title layout, the second for the menu list. I wrote a toggle function by clicking an icon in the title layout, and I'm trying to hide and show a menu list. But this does not work for me.

Below is my code:

file app.navbarComponent.html :

<header id='sv_header'> <div class='row'> <div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 col'> <a href='' class='logo'> <img src='{{ logo }}' alt='Savaari' /> </a> </div> <div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 col supportHolder'> <img src='{{ customercare }}' alt='24X7 Customer Care Support' /> </div> <div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right col loginHolder'> <a class='user_login' (click)='toggleMenu()'> <img src='{{ signin }} ' alt='signin' /> <span>Sign In</span> </a> </div> </div> </header> 

file app.navbarComponent.ts :

 import { Component } from '@angular/core'; @Component({ selector: 'navbar', templateUrl: './app.navbarComponent.html' }) export class NavbarComponent { menulist: boolean = false; logo = '../assets/img/logo.png'; customercare = '../assets/img/cc-support.png'; signin = '../assets/img/signin.png'; toggleMenu(): void { this.menulist = !this.menulist; alert(this.menulist); } } 

file app.menuComponent.html :

 <div class='menulist' > <ul> <li *ngFor="let menu of menus" [HIDDEN]="!menulist"> <a href="{{menu.href}}"> {{menu.name}} </a> </li> </ul> </div> 

Can anyone help me resolve this.

Thanks in advance.

Answer 1

 <div class='menulist'> <ul *ngIf="!menulist"> <li *ngFor="let menu of menus"> <a href="{{menu.href}}"> {{menu.name}} </a> </li> </ul> </div> 

You cannot put * ngIf and * ngFor on the same element - angular does not like

Answer 2

The problem is fixed.

Since we used two different components. We must write a service to listen to the click event.

First we need to Bind the click event to the INJECTOR called the Service in angular. After that, using the Injector tooltip, we will call the function in another component when the icon is clicked.