Как сделать подменю под меню в боковой навигации?

Question

У меня есть следующий массив в моем файле TS:

public pages: Page[] = [
    { name: 'Smart ', link: '/smart', icon: 'crop_landscape', id: 'markRectangle'},
    { name: 'Shop', link: '/options', icon: 'crop_landscape', id: 'markRectangle'},

  ];

Я рендеринг этого массива в боковой навигации с использованием * ngFor:

<mat-nav-list>
        <a mat-list-item *ngFor="let page of pages" [routerLink]='[page.link]'>
          <button mat-icon-button id="{{page.id}}"  (click)="rightNavOpen(true,page?.name)">
          <mat-icon style="padding-right:5px;">{{page?.icon}}</mat-icon>
          <span id="shapeName" [@animateText]="linkText ? 'show' : 'hide'">{{ page?.name }} </span></button>
        </a>          


        </mat-nav-list>

Мое требование заключается в том, что в Закладка «Магазин» Я хочу показать в шоу еще несколько подменю. Это возможно, если я добавлю что-то в массив Страницы.

Answer 1

Я немного обновил ваш html код. раньше вы зацикливались на anchor (), поэтому мы не можем создать в нем дочерний элемент, потому что он сделает все элементы внутри кликабельными с помощью одной и той же ссылки, затем добавил дочерний элемент l oop внутри него.

public pages: Page[] = [
{
  name: 'Smart ',
  link: '/smart',
  icon: 'crop_landscape',
  id: 'markRectangle',
  children: [
    {
      name: 'Show More',
      link: '/smart',
      icon: 'crop_landscape',
      id: 'markRectangle',
      children: [

      ]
    }
  ]
},
{
  name: 'Shop',
  link: '/options',
  icon: 'crop_landscape',
  id: 'markRectangle'
},

];

<mat-nav-list>
  <mat-list-item *ngFor="let page of pages" >
     <a matLine [routerLink]='[page.link]'>{{ link }}</a>
     <button mat-icon-button id="{{page.id}}"  (click)="rightNavOpen(true,page?.name)">
      <mat-icon style="padding-right:5px;">{{page?.icon}}</mat-icon>
      <span id="shapeName" [@animateText]="linkText ? 'show' : 'hide'">{{ page?.name }} </span>
     </button>

     <mat-list-item *ngFor="let child of page.children" >
        <a matLine [routerLink]='[child.link]'>{{ link }}</a>
        <button mat-icon-button id="{{child.id}}"  (click)="rightNavOpen(true,child?.name)">
         <mat-icon style="padding-right:5px;">{{child?.icon}}</mat-icon>
         <span id="shapeName" [@animateText]="linkText ? 'show' : 'hide'">{{ child?.name }} </span>
        </button>
     </mat-list-item>
  </mat-list-item>
</mat-nav-list>