[Fixed] Iterate JSON object and print the multilevel value in angular

Issue

I have to loop through the nested/multilevel JSON object and need to create a multilevel menu.

This is the final UI view. it need to bind name, link and icon for each category .

I will get JSON object in this format from backend::

{
  "data": [
    {
      "subMenu": [
        {
          "subMenu": [
            {
              "name": "Change Password",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Menu Rights",
              "link": " ",
              "icon": ""
            },
            {
              "name": "User Branch Rights",
              "link": " ",
              "icon": ""
            },
            {
              "name": "User Setup",
              "link": " ",
              "icon": ""
            }
          ],
          "name": "User Maintanace",
          "icon": ""
        }
      ],
      "name": "Administration",
      "icon": ""
    },
    {
      "subMenu": [
        {
          "subMenu": [
            {
              "name": "Area List",
              "link": " ",
              "icon": ""
            },
            {
              "name": "City List",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Country List",
              "link": " ",
              "icon": ""
            },
            {
              "name": "District List",
              "link": " ",
              "icon": ""
            },
            {
              "name": "State List",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Village Core Mapping",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Village List",
              "link": " ",
              "icon": ""
            }
          ],
          "name": "Address Setup",
          "icon": ""
        },
        {
          "subMenu": [
            {
              "name": "Branch Setup",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Company Setup",
              "link": " ",
              "icon": ""
            }
          ],
          "name": "Organisational Setup",
          "icon": ""
        }
      ],
      "name": "Configurations",
      "icon": ""
    },
    {
      "name": "MIS",
      "icon": "",
      "link": " "
    },
    {
      "subMenu": [
        {
          "name": "Account Management",
          "icon": "",
          "link": " "
        },
        {
          "subMenu": [
            {
              "name": "Customers",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Prospect List",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Referral List",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Referred List",
              "link": " ",
              "icon": ""
            }
          ],
          "name": "Customer Management",
          "icon": ""
        },
        {
          "name": "Document Printings",
          "icon": "",
          "link": " "
        },
        {
          "name": "Loan Management",
          "icon": "",
          "link": " "
        }
      ],
      "name": "Operational Masters",
      "icon": ""
    },
    {
      "name": "Processes",
      "icon": "",
      "link": " "
    }
  ],
  "status": "S"
}

Can someone help me to segregate above data? Any help would be appreciated. Thank you.

Solution

As stated by @Ravindra this can be done through recursion

<ul>
  <li *ngFor="let menuItem of menuData"> {{ menuItem.name }}
    <ng-container *ngIf="menuItem.subMenu">
      <ng-container *ngTemplateOutlet="inner; context:menuItem"></ng-container>
    </ng-container>
  </li>
</ul>

<ng-template #inner let-subMenu="subMenu">
  <ul>
    <li *ngFor="let menuItem of subMenu">
      {{ menuItem.name }}
      <ng-container *ngIf="menuItem.subMenu">
        <ng-container *ngTemplateOutlet="inner; context:menuItem"></ng-container>
      </ng-container>
    </li>
  </ul>
</ng-template>

See this Demo