Angular 4 Show Hide Elements | Angular 4 Toggle

Hello guys, I am going to share toggle menu using angular 4. I have two components.

1-      Header Layout and

2-      Second one is for Menu List.

I have written a toggle function on click of icon in the header layout and I am trying to show and hide to menu items.

Stayed Informed – Angular 2 if then else examples

Example as,

import { Component } from '@angular/core';

@Component({
    selector: 'navbar',
    templateUrl: '/app/myComponent.html'
})
export class myComponent {
    menulist: boolean = false;
    logo = '/images/logo.png';

    toggleMenu(): void { 
        this.menuItem = !this.menuItem;
    }
}

//app-menu.html 
<div class="menues">
  <ul *ngIf="!menuItem">
    <li *ngFor="let menu of menus">
      <a href="{{menu.href}}" class="menulink">{{menu.menuName}}</a>
    </li>
  </ul>
</div>

Stayed Informed - Best Angular 2 Interview Questions and Answers

I hope you are enjoying with this post! Please share with you friends. Thank you!!