python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions