I need to show sidenav menu-bar with an icon (expand_more) which is shown in the image.

For example if the user clicks on SALE or icon which is beside SALE it should show its child items that are present inside the array (check Ts file).

This is an example of StackBlitz (not mine) https://stackblitz.com/edit/dynamic-nested-sidenav-menu?file=app%2Fmenu-list-item%2Fmenu-list-item.component.html once visit this link to get an idea about my requirement.

I got stuck here in the middle while doing:

  <!-- Side navigation -->
  <mat-drawer #sideNav mode="over" class="side-nav">

    <div fxLayout="column" class="my-4">

      <!-- Navigating items list -->
      <div fxLayout="row-wrap" (click)="syncMasterData()" class="side-nav-content pt-2 pl-3 " routerLinkActive="active">
        <mat-icon class="mr-4">sync</mat-icon>
        <a (click)="sideNav.close()" class="mr-3">Sync master data</a>
      </div>

      <div fxLayout="row-wrap" class="side-nav-content pl-3" routerLinkActive="active" *ngFor="let menu of menuList">

        <a>
        <mat-icon>{{ menu.icon }}</mat-icon>
        <span class="mx-4 mb-1" (click)="sideNav.close()">{{ menu.title }}</span>
        <span fxFlex *ngIf="menu.children && menu.children.length">

        <span fxFlex></span>
          <mat-icon *ngIf="menu?.children || expanded" [@indicatorRotate]="expanded ? 'expanded': 'collapsed'"> expand_more </mat-icon>
        </span>
      </a>
      <!-- <div *ngIf="expanded">
        <span *ngFor="let child of menu.children">
          <span>{{child.title}}</span>
        </span>
      </div> -->
        <!-- <mat-icon class="mr-4">{{menu?.icon}}</mat-icon>
        <span>{{menu.title}}</span> -->
        <!-- <a *ngIf="menu?.type === 'Purchase'" (click)="sideNav.close()" routerLink="{{menu?.link}}" [queryParams]="{type : 'Purchase'}" class="mr-3">{{menu?.title}}</a>
        <a *ngIf="menu?.type === 'Sale'" (click)="sideNav.close()" routerLink="{{menu?.link}}" [queryParams]="{type : 'Sale'}" class="mr-3">{{menu?.title}}</a>
        <a *ngIf="menu?.type !== 'Purchase' && menu?.type !== 'Sale'" (click)="sideNav.close()" routerLink="{{menu?.link}}" class="mr-3">{{menu?.title}}</a> -->
      </div>

      <!-- Navigating items list -->

      <!-- Logout -->
      <div fxLayout="row-wrap" class="side-nav-content pt-1 pl-3 mt-3">
        <mat-icon class="mr-4">exit_to_app</mat-icon>
        <a class="mr-3" (click)="logOut()">Logout</a>
      </div>
      <!-- / Logout -->

    </div>

    <!-- Footer -->
    <div class="footer" fxLayout="column">
      <!-- <h5>Name:</h5>
      <h5>Outlet:</h5> -->
      <div class="ml-4 mt-2" fxLayout="row-wrap">
        <h6 class="mr-2"><b>Name :</b></h6>
        <span>{{ userInfo?.data?.userName |titlecase }}</span>
      </div>
      <div class="ml-4" fxLayout="row-wrap">
        <h6 class="mr-2 mt-1"><b>Outlet :</b></h6>
        <span>{{ outletName }}</span>
      </div>
    </div>
    <!-- / Footer -->

  </mat-drawer>
  <!-- / Side navigation -->

Ts

menuList: any[] = [
    // {
    //   icon: 'sync',
    //   link: '/app/syncMasterData',
    //   title: 'Sync Master Data',
    // },
    {
      icon: 'person',
      link: '/app/home',
      title: 'Home',
    },
    {
      icon: 'create_new_folder',
      // link: '/app/sale',
      title: 'Sale',
      type: 'Sale',

      children: [
        {
          icon: 'create_new_folder',
          link: '/app/sale',
          title: 'Cash sale',
          type: 'Sale',
        },
        {
          icon: 'monetization_on',
          link: '/app/credit',
          title: 'Credit sale',
          type: 'credit',
        },
        {
          icon: 'monetization_on',
          link: '/app/sale-returns',
          title: 'Sale returns',
        },

      ]
    },
    {
      icon: 'monetization_on',
      // link: '/app/purchase-returns',
      title: 'Returns',
      children: [
        {
          icon: 'monetization_on',
          link: '/app/purchase',
          title: 'Cash purchase',
          type: 'Purchase',
        },
        {
          icon: 'monetization_on',
          link: '/app/creditPurchase',
          title: 'Credit purchase',
          type: 'creditPurchase',
        },
        {
        icon: 'monetization_on',
        link: '/app/purchase-returns',
        title: 'Purchase returns',
        },
      ]
    },
    {
      icon: 'local_shipping',
      // link: '/app/stock-shift',
      title: 'Stock-shift',
      children: [
        {
          icon: 'local_shipping',
          link: '/app/stock-shift',
          title: 'Stock-shift',
        },
        {
          icon: 'description',
          link: '/app/stockShift-approval',
          title: 'Stock-shift approval',
        },
        {
          icon: 'local_shipping',
          link: '/app/stock-adjustment',
          title: 'Stock adjustment',
        },
        {
          icon: 'sync',
          link: '/app/stock-adjustment-sync',
          title: 'Stock adjustment sync',
        },
      ]
    },

    {
      icon: 'view_quilt',
      link: '/app/stock-board',
      title: 'Stock board',
    },


    {
      icon: 'description',
      link: '/app/my-transactions',
      title: 'Transactions',
      children: [
        {
          icon: 'description',
          link: '/app/my-transactions',
          title: 'My transactions',
        },
        {
          icon: 'sync',
          link: '/app/syncTransaction',
          title: 'Sync transactions',
        },
      ]
    },

    {
      icon: 'monetization_on',
      link: '/app/market-prices',
      title: 'Market prices',
    },
    {
      icon: 'featured_play_list',
      link: '/app/reports',
      title: 'Reports',
    }

  ];