Angular 4 show hide

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>


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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.