Metronic side menu not loading menus on async call

Question

Here is my HTML code for side menu.

<!--begin::Brand-->
<div class="brand flex-column-auto" id="kt_brand" [ngClass]="brandClasses">
  <!--begin::Logo-->
  <a routerLink="/" class="brand-logo">
    <img alt="Logo" [attr.src]="headerLogo" />
  </a>
  <!--end::Logo-->

  <ng-container *ngIf="asideSelfMinimizeToggle">
    <button class="brand-toggle btn btn-sm px-0" id="kt_aside_toggle">
      <span [inlineSVG]="
          './assets/media/svg/icons/Navigation/Angle-double-left.svg'
        " cacheSVG="true" class="svg-icon svg-icon-xl"></span>
    </button>
  </ng-container>
</div>
<!--end::Brand-->

<!--begin::Aside Menu-->
<div class="aside-menu-wrapper flex-column-fluid" id="kt_aside_menu_wrapper">
  <ng-container *ngIf="disableAsideSelfDisplay">
    <!--begin::Header Logo-->
    <a routerLink="/">
      <img alt="Logo" [attr.src]="headerLogo" />
    </a>
    <!--end::Header Logo-->
  </ng-container>
  <!--begin::Menu Container-->
  <ng-container *ngIf="menuDynamic">
    <div id="kt_aside_menu" class="aside-menu" [ngClass]="asideMenuCSSClasses" data-menu-vertical="1"
      [attr.data-menu-scroll]="asideMenuScroll" [attr.data-menu-dropdown]="asideMenuDropdown"
      data-menu-dropdown-timeout="500">
      <!-- begin::Menu Nav -->
      <ul class="menu-nav" [ngClass]="ulCSSClasses">
        <ng-container *ngFor="let item of menuDynamic">
          <ng-container *ngIf="item?.section" [ngTemplateOutlet]="menuItemSectionTemplate"
            [ngTemplateOutletContext]="{ item: item }"></ng-container>
          <ng-container *ngIf="item?.attributes[0]?.separator" [ngTemplateOutlet]="menuItemSeparatorTemplate"></ng-container>
          <ng-container *ngIf="item?.sectionName"
            [ngTemplateOutlet]="menu1LevelTemplate"
            [ngTemplateOutletContext]="{ item: item }"></ng-container>
        </ng-container>
      </ul>
      <!-- end::Menu Nav -->
    </div>
    <!--end::Menu Container-->
  </ng-container>
</div>
<!--end::Aside Menu-->

<!-- begin::1 Level -->
<ng-template #menu1LevelTemplate let-item="item">
  <!-- begin::if don't have submenu -->
  <ng-container *ngIf="item?.Modules?.length === 0">
    <li class="menu-item" aria-haspopup="true" routerLinkActive="menu-item-active">
      <a class="menu-link" [routerLink]="item?.attributes[0]?.page" routerLinkActive="active">
        <span [inlineSVG]="item?.attributes[0]?.svg" cacheSVG="true" class="svg-icon menu-icon"></span>
        <span class="menu-text" [translate]="item?.attributes[0]?.translate">{{
          item?.sectionName
          }}</span>
      </a>
    </li>
  </ng-container>
  <!-- end::if don't have submenu -->

  <!-- begin::if has submenu -->
  <ng-container *ngIf="item?.Modules?.length > 0">
    <li class="menu-item menu-item-submenu" aria-haspopup="true" data-menu-toggle="hover"
      [ngClass]="{ 'menu-item-open': isMenuItemActive(item?.attributes[0]?.page) }" routerLinkActive="menu-item-open">
      <a class="menu-link menu-toggle" [attr.href]="item?.attributes[0]?.page" routerLinkActive="active"
        [ngClass]="{ 'active ': isMenuItemActive(item?.attributes[0]?.page) }">
        <span [inlineSVG]="item?.attributes[0]?.svg" cacheSVG="true" class="svg-icon menu-icon"></span>
        <span class="menu-text" [translate]="item?.attributes[0]?.translate">{{
          item?.sectionName
          }}</span>
        <i class="menu-arrow"></i>
      </a>
      <div class="menu-submenu">
        <i class="menu-arrow"></i>
        <ul class="menu-subnav">
          <li class="menu-item menu-item-parent" aria-haspopup="true">
            <span class="menu-link">
              <span class="menu-text" [translate]="item?.attributes[0]?.translate">{{
                item?.sectionName
                }}</span>
            </span>
          </li>
          {{item?.Modules}}
          <ng-container *ngFor="let sub of item?.Modules" [ngTemplateOutlet]="menu2LevelTemplate"
            [ngTemplateOutletContext]="{ item: sub }"></ng-container>
        </ul>
      </div>
    </li>
  </ng-container>
  <!-- end::if has submenu -->
</ng-template>
<!-- end::1 Level -->

<!-- begin::2 Level -->
<ng-template #menu2LevelTemplate let-item="item">
  <!-- begin::if don't have submenu -->
  <ng-container *ngIf="item?.Tasks?.length === 0">
    <li class="menu-item" routerLinkActive="menu-item-active" aria-haspopup="true" data-menu-toggle="hover">
      <a class="menu-link" [routerLink]="item?.attributes[0]?.page" routerLinkActive="active">
        <i class="menu-bullet menu-bullet-dot">
          <span></span>
        </i>
        <span class="menu-text" [translate]="item?.attributes[0]?.translate">{{
          item?.moduleName
          }}</span>
      </a>
    </li>
  </ng-container>
  <!-- end::if don't have submenu -->

  <!-- begin::if has submenu -->
  <ng-container *ngIf="item?.Tasks?.length > 0">
    <li class="menu-item menu-item-submenu" aria-haspopup="true" data-menu-toggle="hover"
      [ngClass]="{ 'menu-item-open': isMenuItemActive(item?.attributes[0]?.page) }" routerLinkActive="menu-item-open">
      <a class="menu-link menu-toggle" [attr.href]="item?.attributes[0]?.page" [ngClass]="{ 'active ': isMenuItemActive(item?.attributes[0]?.page) }"
        routerLinkActive="active">
        <i class="menu-bullet menu-bullet-dot">
          <span></span>
        </i>
        <span class="menu-text" [translate]="item?.attributes[0]?.translate">{{
          item?.moduleName
          }}</span>
        <i class="menu-arrow"></i>
      </a>
      <div class="menu-submenu">
        <i class="menu-arrow"></i>
        <ul class="menu-subnav">
          <!-- submenu-->
          <ng-container *ngFor="let sub of item?.Tasks" [ngTemplateOutlet]="menu3LevelTemplate"
            [ngTemplateOutletContext]="{ item: sub }"></ng-container>
        </ul>
      </div>
    </li>
  </ng-container>
  <!-- end::if has submenu -->
</ng-template>
<!-- end::2 Level -->

<!-- begin::3 Level -->
<ng-template #menu3LevelTemplate let-item="item">
  <li class="menu-item" aria-haspopup="true" routerLinkActive="menu-item-active">
    <a class="menu-link" [routerLink]="item?.attributes[0]?.page" routerLinkActive="active">
      <i class="menu-bullet menu-bullet-dot">
        <span></span>
      </i>
      <span class="menu-text" [translate]="item?.attributes[0]?.translate">{{
        item?.taskName
        }}</span>
    </a>
  </li>
</ng-template>
<!-- end::3 Level -->

<!-- begin::Separator -->
<ng-template #menuItemSeparatorTemplate>
  <li class="menu-separator"><span></span></li>
</ng-template>
<!-- end::3 Separator -->

<!-- begin::Section -->
<ng-template #menuItemSectionTemplate let-item="item">
  <li class="menu-section">
    <h4 class="menu-text" [translate]="item?.attributes[0]?.translate">{{ item?.section }}</h4>
    <i class="menu-icon flaticon-more-v2"></i>
  </li>
</ng-template>
<!-- end::Section -->

Here is my typescript code.

    export class AsideDynamicComponent implements OnInit, OnDestroy {
    async ngOnInit() {
    const userIdSubscription = this.authService.currentUserSubject.pipe(
          switchMap((data: any) => {
            if (data?.id) {
              return this.userManagementService.getUsers(data.id, '');
            }
            else {
              return null;
            }
          })).subscribe(async (user) => {
            this.permissionLevelOnClientUser.UserId = this.userDetails?.Id;
            this.permissionLevelOnClientUser.RoleId = this.userDetails?.RoleId;
            await this.loadPermissionLevels(this.permissionLevelOnClientUser);
            this.cdr.detectChanges();
          });
        this.subscriptions.push(userIdSubscription);
        // dynamic menu load
        const menuDynamic = this.menuSubject.subscribe(async (menu) => {
          this.menuDynamic = menu;
        });
        this.subscriptions.push(menuDynamic);
    }

async loadPermissionLevels(permissionLevelOnUser: PermissionLevelOnUser) {
    if (permissionLevelOnUser.UserId != null) {
      await this.loadSection(permissionLevelOnUser);
    }
  }
  
  loadSection(permissionLevelOnUser: PermissionLevelOnUser) {
    const getUserSectionPermission = this.userManagementService.getUsersPermissionLevelMenu('L1', '').pipe(
      switchMap(levelData => {
        return this.userManagementService.getPermissionLevelPerUser(permissionLevelOnUser).pipe(
          map(gP => ({ levelData, gP }))
        );
      })
    ).subscribe(({ levelData, gP }) => {
      if (gP.filter(se => se.type === 'S')?.length > 0) {
        levelData.sectionList.forEach(sL => {
          gP.filter(se => se.type === 'S')?.find((val, index) => {
            if (val.levelId === sL.sectionId) {
              sL.Permissions = val.objLevel;
              sL.userId = val.userId;
              return true;
            }
          });
        });
      } else {
        levelData.sectionList.forEach(sL => {
          sL.isTrue = false;
          sL.userId = permissionLevelOnUser.UserId;
        });
      }
  
      this.sectionList = levelData.sectionList;
      this.cdr.detectChanges();
  
      const moduleLoadingTasks = this.sectionList.map(sL => this.loadModule(sL.sectionId));
      forkJoin(moduleLoadingTasks).subscribe(results => {
        results.forEach((result, index) => {
          this.sectionList[index].Modules = result;
        });
        this.menuSubject.next(this.sectionList);
      });
  
      this.subscriptions.push(moduleLoadingTasks);
    });
    this.subscriptions.push(getUserSectionPermission);
  }
  
  async loadModule(levelId: string) {
    const levelData = await this.userManagementService.getUsersPermissionLevelMenu('L2', levelId).toPromise();
    const gP = await this.userManagementService.getPermissionLevelPerUser(this.permissionLevelOnClientUser).toPromise();
  
    levelData.moduleList.forEach(mL => {
      const val = gP.find(mo => mo.type === 'M' && mo.levelId === mL.moduleId);
      if (val) {
        mL.Permissions = val.objLevel;
        mL.userId = val.userId;
      } else {
        mL.isTrue = false;
        mL.userId = this.editUserId;
      }
    });
  
    this.cdr.detectChanges();
    const taskLoadingTasks = levelData.moduleList.map(mL => this.loadTask(mL.moduleId));
    const taskResults = await Promise.all(taskLoadingTasks);
    
    levelData.moduleList.forEach((mL, index) => {
      mL.Tasks = taskResults[index];
    });
  
    return levelData.moduleList;
  }
  
  async loadTask(levelId: string) {
    const levelData = await this.userManagementService.getUsersPermissionLevelMenu('L3', levelId).toPromise();
    const gP = await this.userManagementService.getPermissionLevelPerUser(this.permissionLevelOnClientUser).toPromise();
  
    levelData.taskList.forEach(tL => {
      const val = gP.find(mo => mo.type === 'T' && mo.levelId === tL.taskId);
      if (val) {
        tL.Permissions = val.objLevel;
        tL.userId = val.userId;
      } else {
        tL.isTrue = false;
        tL.userId = this.editUserId;
      }
    });
  
    return levelData.taskList;
  }

For reference here is the JSON data

    [
  {
    "sectionId": "facef076-5d6e-4e62-ab5b-a8a744a5345d",
    "sectionName": "Financial",
    "description": null,
    "createdBy": null,
    "createdDate": "2022-06-12T11:00:05.877",
    "updatedBy": null,
    "updatedDate": null,
    "attributes": [
      {
        "attributeId": "8b66102b-3b34-4ee1-89a5-baa149416885",
        "isRoot": true,
        "icon": "fas fa-calculator",
        "svg": "./assets/media/svg/icons/Shopping/Wallet.svg",
        "page": null,
        "translate": null,
        "bullet": "dot",
        "menuId": "facef076-5d6e-4e62-ab5b-a8a744a5345d",
        "createdBy": null,
        "createdDate": "2023-08-07T13:57:25.097",
        "updatedBy": null,
        "updatedDate": null
      }
    ],
    "isTrue": false,
    "userId": "5429db48-60a5-42be-bffa-b36795714c14",
    "Modules": [
      {
        "moduleId": "4a36a671-988c-41cb-8858-99ea97489abb",
        "moduleName": "Approvals",
        "description": null,
        "sectionId": "facef076-5d6e-4e62-ab5b-a8a744a5345d",
        "createdBy": null,
        "createdDate": "2022-06-12T11:35:15.087",
        "updatedBy": null,
        "updatedDate": null,
        "attributes": [
          {
            "attributeId": "6aee6114-aa1b-415b-a1dc-84dfe52e2f68",
            "isRoot": false,
            "icon": null,
            "svg": null,
            "page": null,
            "translate": null,
            "bullet": null,
            "menuId": "4a36a671-988c-41cb-8858-99ea97489abb",
            "createdBy": null,
            "createdDate": "2023-08-08T06:06:42.52",
            "updatedBy": null,
            "updatedDate": null
          }
        ],
        "isTrue": false,
        "userId": "5429db48-60a5-42be-bffa-b36795714c14",
        "Tasks": [
          {
            "taskId": "e2ab2849-b2c2-4ec8-a7c5-6f1d27924f83",
            "levelCode": 0,
            "taskName": "List Credits",
            "description": null,
            "createdBy": null,
            "updatedBy": null,
            "updatedDate": null,
            "definition": null,
            "reasonAdded": null,
            "intendedRecipients": null,
            "releaseNumber": null,
            "category": null,
            "createdDate": "2023-08-07T17:11:40.283",
            "lastModifiedBy": null,
            "lastModifiedDate": null,
            "features": 0,
            "status": 0,
            "taskGuid": null,
            "moduleId": "4a36a671-988c-41cb-8858-99ea97489abb",
            "attributes": [
              {
                "attributeId": "69d89756-66de-46b8-9f35-e0cd0174c314",
                "isRoot": false,
                "icon": null,
                "svg": null,
                "page": "/financials-management/creditlistapproval",
                "translate": null,
                "bullet": null,
                "menuId": "e2ab2849-b2c2-4ec8-a7c5-6f1d27924f83",
                "createdBy": null,
                "createdDate": "2023-08-08T06:06:42.52",
                "updatedBy": null,
                "updatedDate": null
              }
            ],
            "isTrue": false,
            "userId": "5429db48-60a5-42be-bffa-b36795714c14"
          },
          {
            "taskId": "1bc94e67-51cf-484f-b0f0-ac5ecfe6f4ee",
            "levelCode": 0,
            "taskName": "List Bills",
            "description": null,
            "createdBy": null,
            "updatedBy": null,
            "updatedDate": null,
            "definition": null,
            "reasonAdded": null,
            "intendedRecipients": null,
            "releaseNumber": null,
            "category": null,
            "createdDate": "2023-08-07T17:11:40.283",
            "lastModifiedBy": null,
            "lastModifiedDate": null,
            "features": 0,
            "status": 0,
            "taskGuid": null,
            "moduleId": "4a36a671-988c-41cb-8858-99ea97489abb",
            "attributes": [
              {
                "attributeId": "8e50d501-21f7-4c9e-ad4e-7ddb81d01424",
                "isRoot": false,
                "icon": null,
                "svg": null,
                "page": "/financials-management/billapproval",
                "translate": null,
                "bullet": null,
                "menuId": "1bc94e67-51cf-484f-b0f0-ac5ecfe6f4ee",
                "createdBy": null,
                "createdDate": "2023-08-08T06:06:42.52",
                "updatedBy": null,
                "updatedDate": null
              }
            ],
            "isTrue": false,
            "userId": "5429db48-60a5-42be-bffa-b36795714c14"
          }
        ]
      },
      {
        "moduleId": "d19fc021-cfe7-45fd-be7f-ca07ef65ceea",
        "moduleName": "Receivable",
        "description": null,
        "sectionId": "facef076-5d6e-4e62-ab5b-a8a744a5345d",
        "createdBy": null,
        "createdDate": "2022-06-12T11:35:15.087",
        "updatedBy": null,
        "updatedDate": null,
        "attributes": [
          {
            "attributeId": "9998c919-22a1-4ccf-866c-553083b9636c",
            "isRoot": false,
            "icon": null,
            "svg": null,
            "page": null,
            "translate": null,
            "bullet": null,
            "menuId": "d19fc021-cfe7-45fd-be7f-ca07ef65ceea",
            "createdBy": null,
            "createdDate": "2023-08-08T06:06:42.52",
            "updatedBy": null,
            "updatedDate": null
          }
        ],
        "isTrue": false,
        "userId": "5429db48-60a5-42be-bffa-b36795714c14",
        "Tasks": [
          {
            "taskId": "337b3803-d06f-4341-86a5-cd8330e34f45",
            "levelCode": 0,
            "taskName": "Credit Memos",
            "description": null,
            "createdBy": null,
            "updatedBy": null,
            "updatedDate": null,
            "definition": null,
            "reasonAdded": null,
            "intendedRecipients": null,
            "releaseNumber": null,
            "category": null,
            "createdDate": "2023-08-07T17:11:40.283",
            "lastModifiedBy": null,
            "lastModifiedDate": null,
            "features": 0,
            "status": 0,
            "taskGuid": null,
            "moduleId": "d19fc021-cfe7-45fd-be7f-ca07ef65ceea",
            "attributes": [
              {
                "attributeId": "0001c068-0bfd-467a-a71a-9e068c682ed4",
                "isRoot": false,
                "icon": null,
                "svg": null,
                "page": "/financials-management/listcreditmemo",
                "translate": null,
                "bullet": null,
                "menuId": "337b3803-d06f-4341-86a5-cd8330e34f45",
                "createdBy": null,
                "createdDate": "2023-08-08T06:06:42.52",
                "updatedBy": null,
                "updatedDate": null
              }
            ],
            "isTrue": false,
            "userId": "5429db48-60a5-42be-bffa-b36795714c14"
          },
          {
            "taskId": "fd698286-489d-4f24-b111-d5851b884bed",
            "levelCode": 0,
            "taskName": "Open Invoices",
            "description": null,
            "createdBy": null,
            "updatedBy": null,
            "updatedDate": null,
            "definition": null,
            "reasonAdded": null,
            "intendedRecipients": null,
            "releaseNumber": null,
            "category": null,
            "createdDate": "2023-08-07T17:11:40.283",
            "lastModifiedBy": null,
            "lastModifiedDate": null,
            "features": 0,
            "status": 0,
            "taskGuid": null,
            "moduleId": "d19fc021-cfe7-45fd-be7f-ca07ef65ceea",
            "attributes": [
              {
                "attributeId": "5b4b198b-fb8d-48d2-a5da-0633b32fca62",
                "isRoot": false,
                "icon": null,
                "svg": null,
                "page": "/financials-management/listinvoice",
                "translate": null,
                "bullet": null,
                "menuId": "fd698286-489d-4f24-b111-d5851b884bed",
                "createdBy": null,
                "createdDate": "2023-08-08T06:06:42.52",
                "updatedBy": null,
                "updatedDate": null
              }
            ],
            "isTrue": false,
            "userId": "5429db48-60a5-42be-bffa-b36795714c14"
          }
        ]
      },
      {
        "moduleId": "67f06708-05ff-48ef-a882-cbeb4c283ddd",
        "moduleName": "Overview",
        "description": null,
        "sectionId": "facef076-5d6e-4e62-ab5b-a8a744a5345d",
        "createdBy": null,
        "createdDate": "2022-06-12T11:35:15.087",
        "updatedBy": null,
        "updatedDate": null,
        "attributes": [
          {
            "attributeId": "6c647792-8a38-486c-ae8a-7a3f04bf3e92",
            "isRoot": false,
            "icon": null,
            "svg": null,
            "page": "/financials-management/dashboard",
            "translate": null,
            "bullet": null,
            "menuId": "67f06708-05ff-48ef-a882-cbeb4c283ddd",
            "createdBy": null,
            "createdDate": "2023-08-08T06:06:42.52",
            "updatedBy": null,
            "updatedDate": null
          }
        ],
        "isTrue": false,
        "userId": "5429db48-60a5-42be-bffa-b36795714c14",
        "Tasks": [
          
        ]
      },
      {
        "moduleId": "ad5fb2c6-e0ea-4fb3-859b-ee53003b45ef",
        "moduleName": "Payables",
        "description": null,
        "sectionId": "facef076-5d6e-4e62-ab5b-a8a744a5345d",
        "createdBy": null,
        "createdDate": "2022-06-12T11:35:15.087",
        "updatedBy": null,
        "updatedDate": null,
        "attributes": [
          {
            "attributeId": "63ed4052-ba73-4873-a9c3-93dee5973389",
            "isRoot": false,
            "icon": null,
            "svg": null,
            "page": null,
            "translate": null,
            "bullet": null,
            "menuId": "ad5fb2c6-e0ea-4fb3-859b-ee53003b45ef",
            "createdBy": null,
            "createdDate": "2023-08-08T06:06:42.52",
            "updatedBy": null,
            "updatedDate": null
          }
        ],
        "isTrue": false,
        "userId": "5429db48-60a5-42be-bffa-b36795714c14",
        "Tasks": [
          {
            "taskId": "d207e5c9-9ede-4d83-963f-701594623096",
            "levelCode": 0,
            "taskName": "List Bills",
            "description": null,
            "createdBy": null,
            "updatedBy": null,
            "updatedDate": null,
            "definition": null,
            "reasonAdded": null,
            "intendedRecipients": null,
            "releaseNumber": null,
            "category": null,
            "createdDate": "2023-08-07T17:11:40.283",
            "lastModifiedBy": null,
            "lastModifiedDate": null,
            "features": 0,
            "status": 0,
            "taskGuid": null,
            "moduleId": "ad5fb2c6-e0ea-4fb3-859b-ee53003b45ef",
            "attributes": [
              {
                "attributeId": "42894b31-65c0-413d-bda8-d9a2b547c77d",
                "isRoot": false,
                "icon": null,
                "svg": null,
                "page": "/financials-management/listbill",
                "translate": null,
                "bullet": null,
                "menuId": "d207e5c9-9ede-4d83-963f-701594623096",
                "createdBy": null,
                "createdDate": "2023-08-08T06:06:42.52",
                "updatedBy": null,
                "updatedDate": null
              }
            ],
            "isTrue": false,
            "userId": "5429db48-60a5-42be-bffa-b36795714c14"
          },
          {
            "taskId": "e7487165-9314-400d-8b7e-9e8d732b7059",
            "levelCode": 0,
            "taskName": "Vendors Credits",
            "description": null,
            "createdBy": null,
            "updatedBy": null,
            "updatedDate": null,
            "definition": null,
            "reasonAdded": null,
            "intendedRecipients": null,
            "releaseNumber": null,
            "category": null,
            "createdDate": "2023-08-07T17:11:40.283",
            "lastModifiedBy": null,
            "lastModifiedDate": null,
            "features": 0,
            "status": 0,
            "taskGuid": null,
            "moduleId": "ad5fb2c6-e0ea-4fb3-859b-ee53003b45ef",
            "attributes": [
              {
                "attributeId": "ff301865-4268-4ec3-94ba-d2748e02e42d",
                "isRoot": false,
                "icon": null,
                "svg": null,
                "page": "/financials-management/vendorcreditlist",
                "translate": null,
                "bullet": null,
                "menuId": "e7487165-9314-400d-8b7e-9e8d732b7059",
                "createdBy": null,
                "createdDate": "2023-08-08T06:06:42.52",
                "updatedBy": null,
                "updatedDate": null
              }
            ],
            "isTrue": false,
            "userId": "5429db48-60a5-42be-bffa-b36795714c14"
          }
        ]
      }
    ]
  },
  {
    "sectionId": "f9b38612-b8f4-4731-bdee-b7d6c0051646",
    "sectionName": "Tools",
    "description": null,
    "createdBy": null,
    "createdDate": "2022-06-12T11:00:05.877",
    "updatedBy": null,
    "updatedDate": null,
    "attributes": [
      {
        "attributeId": "7d7b6c07-be26-4903-a5f6-1ee39da689bf",
        "isRoot": true,
        "icon": "fas fa-calculator",
        "svg": "./assets/media/svg/icons/Tools/Tools.svg",
        "page": null,
        "translate": null,
        "bullet": "dot",
        "menuId": "f9b38612-b8f4-4731-bdee-b7d6c0051646",
        "createdBy": null,
        "createdDate": "2023-08-07T13:57:25.097",
        "updatedBy": null,
        "updatedDate": null
      }
    ],
    "isTrue": false,
    "userId": "5429db48-60a5-42be-bffa-b36795714c14",
    "Modules": [
      {
        "moduleId": "1435f84e-a26f-4d09-a3f7-30913c3ced7a",
        "moduleName": "Currency Converter",
        "description": null,
        "sectionId": "f9b38612-b8f4-4731-bdee-b7d6c0051646",
        "createdBy": null,
        "createdDate": "2022-06-12T11:35:15.087",
        "updatedBy": null,
        "updatedDate": null,
        "attributes": [
          {
            "attributeId": "fc866b56-f59d-484f-a7a0-e5fe3579ad6d",
            "isRoot": false,
            "icon": null,
            "svg": null,
            "page": "#",
            "translate": null,
            "bullet": null,
            "menuId": "1435f84e-a26f-4d09-a3f7-30913c3ced7a",
            "createdBy": null,
            "createdDate": "2023-08-08T06:06:42.52",
            "updatedBy": null,
            "updatedDate": null
          }
        ],
        "isTrue": false,
        "userId": "5429db48-60a5-42be-bffa-b36795714c14",
        "Tasks": [
          
        ]
      }
    ]
  }
]

Within ngOnInit the menuDynamic shows data after sometime with complete Section -->, Module --> Task but on HTML the menuDynamic does not show data even after using *ngIf="(menuDynamic | async) as dataX". Tried everything but nothing seems to help and show data on HTML.