Creating a dynamic menu in Angular

Question

I created a cascading menu in Angular and it works but I want to be dynamic. See this link for a better understanding of what I mean. I want to make something like a table in Angular Material.

fullMenu = [{
  name: "Home",
  childs: [{
    name: "HomeLevel-1",
    childs: [{
      name: "Home-level-2"
    }]
  }]
}, {
  name: "about"
},{
  name: "register",
  childs: [{
    name: "registerLevel-1",
    childs: [{
      name: "registerLevel-2"
    }]
  }]
}];

<ul>
  <ng-template #recursiveList let-fullMenu let-level="level">
    <li *ngFor="let item of fullMenu; let i = index">
      <button class="btn btn-primary" type="button" data-toggle="collapse" [attr.data-target]="'#foo' + i + level" aria-expanded="false" aria-controls="collapseExample">
        {{item.name}}
      </button> {{i}}
      <ul *ngIf="item.childs && item.childs.length > 0">
        <div class="collapse" [attr.id]="'foo' + i +level">
          <div class="card card-body">
            <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.childs, level: level + i + fullMenu.length }"></ng-container>
          </div>
        </div>
      </ul>
    </li>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: fullMenu, level: 0 }"></ng-container>
</ul>

Why don't you use expansion panel? https://material.angular.io/components/expansion/overview — , Dec 31 '19 at 09:05
Have you stuck anywhere when implementing the dynamic component? — Ramesh Reddy, Dec 31 '19 at 09:05
In my suggestion, you need something like recursive rendering. Angular can does it. You can found example here: https://stackoverflow.com/questions/37746516/use-component-in-itself-recursively-to-create-a-tree — Ennjin, Dec 31 '19 at 09:06
Really I don't know waht do you want to get. The link it's only how "inject" a component dinamically. If you want to allow your menu "collapsed" propertie it's only add to the button a `(click)="item.collapsed=!item.collapsed"` and add as condition `*ngIf="!item.collapsed && item.childs && ...` — Eliseo, Dec 31 '19 at 10:05
I want this part of the code to be inside another component and insert that component instead of the code. And it will work properly after adding the code component.
0"> ...... — , Dec 31 '19 at 10:40

score 0 · Answer 1 · answered Dec 31 '19 at 09:16

0

that is talking about how to dynamically create a component, instead of creating a dynamic menu. When you change value of fullMenu , your menu will be changed, too. I think that it is already dynamic

answered Dec 31 '19 at 09:16

Clear Pan

21
2

I want this part of the code to be inside another component and insert that component instead of the code. And it will work properly after adding the code component.
– Dec 31 '19 at 10:40
Why not package the ul into a new component? Use like this, `````` – Clear Pan Dec 31 '19 at 11:22
what happened ? node command to create a new component ``` ng generate component my-ul ``` edit this component, and use like this: ``` ``` – Clear Pan Jan 02 '20 at 01:53

Creating a dynamic menu in Angular

1 Answers1