recursively create a html-list with angular

Question

I have a tree like data structure

    {
        name: "name 1",
        childs: [
            {
                name: "name 1.1",
                childs: [
                    {
                        name: "name 1.1.1",
                        childs: []
                    },
                    {
                        name: "name 1.1.2",
                        childs: [
                            {
                                name: "name 1.1.2.1",
                                childs: []
                            }
                        ]
                    },
                    {
                        name: "name 1.1.3",
                        childs: []
                    }
                ]
            },
            {
                name: "name 1.2",
                childs: [
                    {
                        name: "name 1.2.1",
                        childs: []
                    }
                ]
            },
            {
                name: "name 1.3",
                childs: [ ]
            }
        ]
    }
]

and I want to visualize it as cascaded List like this

<ul>
            <li>name 1
                <ul>
                    <li>name 1.1
                        <ul>
                            <li>name 1.1.1</li>
                            <li>name 1.1.2
                                <ul>
                                    <li>1.1.2.1</li>
                                </ul>
                            </li>
                            <li>name 1.1.3</li>
                        </ul>
                    </li>
                    <li>name 1.2
                        <ul>
                            <li>name 1.2.1</li>
                        </ul>
                    </li>
                    <li>name 1.3</li>
                </ul>
            </li>           
        </ul>

The problem is, my data structure is not fix. So I will need to create my HTML output recursive, but I have no idea how to do this in angular. In this case a simple *ngfor won’t be enough. Is there an angular mechanism that I can use to solve this problem? Or has anyone a clue how I can handle the problem?

BartoszTermena · Accepted Answer · 2020-03-10 09:47:57Z

1

Try like this:

<ul>
  <ng-template #recursiveList let-list>
    <li *ngFor="let item of list">
      {{item.name}}
      <ul *ngIf="item.childs.length > 0">
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.childs }"></ng-container>
      </ul>
    </li>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</ul>

https://stackblitz.com/edit/angular-76qpgf?file=src/app/app.component.html

answered Mar 10, 2020 at 9:47

BartoszTermena

1,4871 gold badge11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

copper spinner Over a year ago

Exacly what I was looking for. Thnak you!

Collectives™ on Stack Overflow

recursively create a html-list with angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related