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 freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Nodejs, 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.