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.
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>
I hope you are enjoying with this post! Please share with you
friends. Thank you!!