Dynamically Nested Menu - Angular Material

Question

I want to create a "Dynamic Nested Menu" with Angular Material.
I Created this one ,
It's work but its have three problems:
1- It's ugly :(
2- Only 3 layer
3- It's not dynamic (i have to update html and add one more layer)
idk what to say anymore : It looks like your post is mostly code; please add some more details.
This is My Menu HTML:

<button mat-icon-button [matMenuTriggerFor]="rootMenu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <!-- [Start] Root Menu -->
  <mat-menu #rootMenu="matMenu">
    <ng-container *ngFor="let cat of categories">
      <div *ngIf="cat.children">
        <div *ngIf="cat.children.length > 0">
          <button mat-menu-item [matMenuTriggerFor]="subMenu">{{cat.name}}</button>
        </div>
        <div *ngIf="!cat.children.length">
          <button mat-menu-item>{{cat.name}}</button>
        </div>
      </div>

      <!-- [Start] Sub Menu -->
      <mat-menu #subMenu="matMenu">
        <ng-container *ngFor="let child of cat.children">
          <div *ngIf="child.children">
            <div *ngIf="child.children.length > 0">
              <button mat-menu-item [matMenuTriggerFor]="subChildMenu"> {{child.name}}</button>
            </div>
            <div *ngIf="!child.children.length">
              <button mat-menu-item>{{child.name}}</button>
            </div>
          </div>

          <!-- [Start] SubChild Menu -->
          <mat-menu #subChildMenu="matMenu">
            <ng-container *ngFor="let zxc of child.children">
              <button mat-menu-item> {{zxc.name}} </button>
            </ng-container>
          </mat-menu>
          <!-- [End] SubChild Menu -->

        </ng-container>
      </mat-menu>
      <!-- [End] Sub Menu -->

    </ng-container>
  </mat-menu>
  <!-- [End] Root Menu -->

This is my Data (i'm using graphql)

{
  "data": {
    "categories": [
      {
        "name": "App",
        "child": [
          {
            "name": "Power",
            "child": [
              {
                "name": "Light",
                "child": []
              },
              {
                "name": "Cable",
                "child": []
              },
              {
                "name": "Others",
                "child": [
                  {
                    "name": "Alerts"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

This is tree of my data

└───App
    └───Power
        ├───Cable
        ├───Light
        └───Others
            └───Alerts

Thanks a lot

Answer 1

I suggest using the awsome tree component that comes with angular material, it looks cool and it's dynamic! also, the code is pretty flexible. Enjoy!