angula rtree

Angular Tree:

ts:

    entitiesTree = [

    {

      title: 'Backlog',

      child: [

        {

          title: '3A4 Backlog',

          child: [

            {

              title: '3A4 Backlog'

            }

          ]

        }

      ]

    },

    {

      title: 'Bill Of Material (BOM)',

      child: [

        {

          title: 'dummy title'

        }

      ]

    }

  ];

<div class="tree-box" *ngFor="let levelOne of entitiesTree;let index = index">

    <ng-container *ngTemplateOutlet="tree;context:{obj: levelOne}"></ng-container>

</div>

<ng-template #tree let-obj="obj">

    <div class="child-tree">

        <ul class="animateMe">

            <li>

                <span (click)="obj['collapse'] = !obj['collapse']" [ngClass]="{

                    'active': (obj?.child?.length && !obj['collapse']),

                    'icon-add-outline': (!obj['collapse']),

                    'icon-dc-power': (obj['collapse'])

                }"></span>

            </li>

            <li>

                <span class="pointer" (click)="getTreeDes(ob)">{{obj.title}}</span>

            </li>

        </ul>

        <ng-container *ngIf="obj.child && obj.child.length">

            <ng-container *ngFor="let leveltwo of obj.child;let i = index ">

                <ng-container *ngTemplateOutlet="tree;context:{obj: leveltwo}"></ng-container>

            </ng-container>

        </ng-container>

    </div>

</ng-template>