Как сделать подкласс в угловых 6?

Question

Я пытаюсь создать многоуровневый список с Angular 6. Обычно он работает на первом уровне, который вы можете увидеть ниже кода.

aside / aside.component.ts

declare const $: any;
declare interface RouteInfo {
  path: string;
  title: string;
  icon: string;
  class: string;
}

export const ROUTES: RouteInfo[] = [
  { path: '/dashboard', title: 'Dashboard',  icon: 'dashboard', class: '' },
  { path: '/user-profile', title: 'User Profile',  icon: 'person', class: '' },
  { path: '/table-list', title: 'Table List',  icon: 'content_paste', class: '' },
  { path: '/typography', title: 'Typography',  icon: 'library_books', class: '' },
  { path: '/icons', title: 'Icons',  icon: 'bubble_chart', class: '' },
  { path: '/maps', title: 'Maps',  icon: 'location_on', class: '' },
  { path: '/maps', title: 'Maps',  icon: 'location_on', class: '' },
  { path: '/notifications', title: 'Notifications',  icon: 'notifications', class: '' },
  { path: '/upgrade', title: 'Upgrade to PRO',  icon: 'unarchive', class: 'active-pro' },
];

Отлично работает с приведенным ниже html-кодом.

aside / aside.component.html

    <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}}">
        <a class="nav-link" [routerLink]="[menuItem.path]">
            <i class="material-icons">{{menuItem.icon}}</i>
            <p>{{menuItem.title}}</p>
        </a>
    </li>

Я хочу добавить дочерние пути.Например, я попробовал этот код, но он не работал.

  { path: '/dashboard',title: 'Dashboard', icon: 'dashboard', class: '',
    [
        { path: '/dashboard/dashboard1', title: 'Dashboard1', icon: 'dashboard', class: ''},
        { path: '/dashboard/dashboard2', title: 'Dashboard2', icon: 'dashboard', class: ''}
    ]  
  }

Как добавить дочерние пути?

Живой пример