Angular 8Javascript

Angular 8 custom nested menu working example

Angular playing api data

Hello to all, welcome to In this post, I will tell you, Angular 8 custom nested menu working example.

Angular 8 custom nested menu working example
Angular 8 custom nested menu working example

I have done with custom code and I am showing limited menus and if you want more then you can add according to your requirement.

For styling, I used bootstrap and font awesome cdns.

Here I am sharing the code and you need to add carefully:

1. This below code, you need to add into your app.component.ts file:

<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<aside class="left-sidebar">
  <div class="scroll-sidebar">
     <nav class="sidebar-nav">
        <ul id="sidebarnav">

           <li [ngClass]="{'active': menus[2]}">
              <a (click)="navmenuclick(2)" class="has-arrow" [attr.aria-expanded]="true ? menus[2]:true"><i class="fa fa-users m-r-5" aria-hidden="true"></i><span class="hide-menu">Customers</span></a>
              <ul *ngIf=menus[2] class="collapse in">
                 <li><a [ngClass]="{'active': submenu['2.0']}" ><i class="fa fa-caret-right m-r-5"></i>Manage Customers</a></li>
                 <li><a [ngClass]="{'active': submenu['2.1']}" ><i class="fa fa-caret-right m-r-5"></i>Add Customer</a></li>

           <li [ngClass]="{'active': menus[3]}">
              <a (click)="navmenuclick(3)" class="has-arrow" [attr.aria-expanded]="true ? menus[3]:true"><i class="fa fa-user-plus m-r-5" aria-hidden="true"></i><span class="hide-menu">Staff</span></a>
              <ul *ngIf=menus[3] class="collapse in">
                 <li><a [ngClass]="{'active': submenu['3.0']}" ><i class="fa fa-caret-right m-r-5"></i>Manage Staff</a></li>
                 <li><a [ngClass]="{'active': submenu['3.1']}" ><i class="fa fa-caret-right m-r-5"></i>Add Staff</a></li>

           <li [ngClass]="{'active': menus[4]}">
              <a (click)="navmenuclick(4)" class="has-arrow" [attr.aria-expanded]="true ? menus[4]:true"><i class="fa fa-files-o m-r-5" aria-hidden="true"></i><span class="hide-menu">Pages</span></a>
              <ul *ngIf=menus[4] class="collapse in" aria-expanded="false">
                 <li><a [ngClass]="{'active': submenu['4.0']}" ><i class="fa fa-caret-right m-r-5"></i>All Pages</a></li>
                 <li><a [ngClass]="{'active': submenu['4.1']}" ><i class="fa fa-caret-right m-r-5"></i>Add New Page</a></li>


2. Now you need to add below code into your app.component.ts file:

import { Component } from '@angular/core';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'childmenu';
  public menus = new Array();
  public submenu = new Array();
    for(let i= 0; i<5; i++){
      if(i != value){
          this.menus[i] = false;	
          /*Submenu Code Start*/
          this.submenu[i+'.'+0] = false;
          this.submenu[i+'.'+1] = false;
          /*Submenu Code Close*/

    if(this.menus[value] == true){
      this.menus[value] = false;  
      this.menus[value] = true;  


This is it and if you have any query then please comment below.


Thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Positive SSL