dynamic loop in angular template

Question

How can we run a dynamic loop in angular template with array of object data.

[
  {
    "name": "name",
    "text": "text",
    "replies": [{
      "name": "Reply1",
      "text": "text",
      "replies": [
        {
          "name": "Reply1.1",
          "text": "text",
          "replies": [{
          "name": "Reply1.1",
          "text": "text",
          "replies": []
        }]
        }
      ]
    },
    {
      "name": "Reply2",
      "text": "text",
      "replies": [
        {
          "name": "Reply2.1",
          "text": "text",
          "replies": []
        }
      ]
    }
    ]
  }
]

We need to hsow this data in a way we comment on facebook with identation. Replies array can have n number of 'replies' child.

i have wriiten the below code but this is static:

<div *ngFor="let data of jsonData">
<div>
    <p>
        <b>{{data.name}}</b>
    </p>
    <p>
        <i>{{data.text}}</i>
    </p>
    <div *ngIf="data.replies.length>= 0">
        <div *ngFor="let reply of data.replies" style="margin-left: 8px;">
            <p>
                <b>{{reply.name}}</b>
            </p>
            <p>
                <i>{{reply.text}}</i>
            </p>
            <div *ngFor="let subreply of reply.replies" style="margin-left: 8px;">
                <p>
                    <b>{{subreply.name}}</b>
                </p>
                <p>
                    <i>{{subreply.text}}</i>
                </p>
            </div>
        </div>
    </div>
</div>
<hr>

if we will add more data in replies array then this will not work. — Raj
– Raj, Commented Jan 17, 2021 at 8:44

brk · Accepted Answer · 2021-01-17 09:23:57Z

You will need a recursive template.

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  jsonData = [
    {
      name: "name",
      text: "text",
      replies: [
        {
          name: "Reply1",
          text: "text",
          replies: [
            {
              name: "Reply1.1",
              text: "text",
              replies: [
                {
                  name: "Reply1.1",
                  text: "text",
                  replies: []
                }
              ]
            }
          ]
        },
        {
          name: "Reply2",
          text: "text",
          replies: [
            {
              name: "Reply2.1",
              text: "text",
              replies: []
            }
          ]
        }
      ]
    }
  ];
}

<div>
    <!--recursiveListTmpl is the template which will be 
        loaded and in context passing the initial jsonData-->
    <ng-container *ngTemplateOutlet="recursiveListTmpl;context:{list:jsonData}"></ng-container>
    <hr>
    
   
    <ng-template #recursiveListTmpl let-list="list">
        <li *ngFor="let item of list">
            {{ item.text }}
            <!--Checking if the replies array in not empty
              if not so then call the replies again-->
            <ul *ngIf="item.replies.length > 0">
                <!--pass the replies array in the context-->
                <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ list: item.replies }"></ng-container>
            </ul>
        </li>
    </ng-template>

In this case you wont need an additional component.You can visit ng-container,ng-template & ngTemplateOutlet for more information

DEMO

thanks for the help. Btw i have already done this using recursive component. Thanks for your time.

Collectives™ on Stack Overflow

dynamic loop in angular template

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