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

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

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

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

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

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 - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment Powered by Blogger.
ASK Questions