Comment ajouter un sous-menu d'en-tête à la barre latérale Material-dashboard-angular2 dans Angular 6

Je suis débutant en Angular, j'ai utilisé Angular 6 pour mon projet universitaire, J'ai créé une barre latérale et cela fonctionne bien, mais lorsque j'essaie d'ajouter un sous-menu, cela ne fonctionne pas.

Je veux savoir comment faire cela correctement.

I ' J'ai utilisé ce tableau de bord

Exemple de sous-menu

sidebar.ts strong>

export const AdminLayoutRoutes: Routes = [
    { path: 'dashboard',      component: DashboardComponent },
    { path: 'class',      component: ClassComponent },
    { path: 'student',      component: StudentComponent },
    { path: 'profile',      component: ProfileComponent},
];

sidebar.html

<div class="logo">
        <div class="logo-img">
        </div>
</div>
<div class="sidebar-wrapper" style="margin-top: 2.5rem;">
  <div *ngIf="isMobileMenu()">
    <ul class="nav navbar-nav nav-mobile-menu">
        <li class="nav-item">
            <a class="nav-link" href="#pablo">
                <i class="material-icons">dashboard</i>
                <p>
                    <span class="d-lg-none d-md-block">Stats</span>
                </p>
            </a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link" href="#pablo" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="material-icons">notifications</i>
                <span class="notification">5</span>
                <p>
                    <span class="d-lg-none d-md-block">Some Actions</span>
                </p>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Mike John responded to your email</a>
                <a class="dropdown-item" href="#">You have 5 new tasks</a>
                <a class="dropdown-item" href="#">You're now friend with Andrew</a>
                <a class="dropdown-item" href="#">Another Notification</a>
                <a class="dropdown-item" href="#">Another One</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#pablo">
                <i class="material-icons">person</i>
                <p>
                    <span class="d-lg-none d-md-block">Account</span>
                </p>
            </a>
        </li>
    </ul>
  </div>
    <ul class="nav">
        <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
            <a class="nav-link" [routerLink]="[menuItem.path]">
                <i class="material-icons">{{menuItem.icon}}</i>
                <p>{{menuItem.title}}</p>
            </a>
        </li>
    </ul>
</div>

routing.ts strong>

    import { Component, OnInit } from '@angular/core';

    declare const $: any;
    declare interface RouteInfo {
        path: string;
        title: string;
        icon: string;
        class: string;
    }
    export const ROUTES: RouteInfo[] = [
        { path: '/dashboard', title: 'Dashboard',  icon: 'home', class: '' },
        { path: '/class', title: 'Class',  icon: 'description', class: '' },
        { path: '/student', title: 'Students',  icon: 'apps', class: '' },
        { path: '/profile', title: 'Profile',  icon: 'person', class: '' },

    ];

    @Component({
      selector: 'app-sidebar',
      templateUrl: './sidebar.component.html',
      styleUrls: ['./sidebar.component.css']
    })
    export class SidebarComponent implements OnInit {
      menuItems: any[];

      constructor() { }

  ngOnInit() {
    this.menuItems = ROUTES.filter(menuItem => menuItem);
  }
  isMobileMenu() {
      if ($(window).width() > 991) {
          return false;
      }
      return true;
  };
}