Angular 7, recursive object table rows

Question

Assume we have the following class:

export class MyClass {
    field1: string,
    next: MyClass
}

I have a table printing a list of MyClass but inside each item, there can be a next value.

<tr *ngFor="let c of _myclasses">
     <ng-template #recursive let-current>
         <td>{{cur.field1}}</td>
     </ng-template>
     <ng-container *ngTemplateOutlet="recursive; context {$implicit: c}"></ng-container>

</tr>

But im kind of stuck here cause i need to create another tr or some row but I cannot figure how..

Thanks.

Output Example:

 let classes = [];

let class1 = new MyClass();
class1.field1 = 1;
class1.next = new MyClass();
class1.next.field1 = 5;

let class2 = new MyClass();
class2.field1 = 3;

classes.push(class1);



<tr>
    <td>1</td>
</tr>
<tr>
    <td>5</td>
</tr><tr>
    <td>3</td>
</tr>

Could you explain what you are trying to achieve? Also an example of _myclasses — Vega
– Vega, Commented Apr 3, 2019 at 8:11

Harun Yilmaz · Accepted Answer · 2019-04-03 08:21:55Z

3

To achieve what you need, you can use nested ng-containers.

 <ng-container *ngFor="let c of _myclasses">
    <ng-container *ngTemplateOutlet="recursive; context {$implicit: c}"></ng-container>
 </ng-container>

 <ng-template #recursive let-current>
     <tr>
        <td>{{cur.field1}}</td>
     </tr>
    <ng-container *ngIf="cur.next">
         <ng-container *ngTemplateOutlet="recursive; context {$implicit: cur.next}"></ng-container>
    </ng-container>
 </ng-template>

Or maybe you can create a pipe that takes _myclasses and flatten it recursively and returns a one-level array of objects.

answered Apr 3, 2019 at 8:21

Harun Yilmaz

8,5893 gold badges30 silver badges40 bronze badges

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

3 Comments

Harun Yilmaz Over a year ago

Glad to help :) But I suggest you to search for solutions about flattening the array via a pipe. It will be a lot cleaner that way.

Ori Refael Over a year ago

I dont want to flat the array. because i want to keep the references objects have to each other. in my project is far more complex than this example :)

Harun Yilmaz Over a year ago

No I mean using pipes. They do not mutate your actual data.

Dimanoid · Accepted Answer · 2019-04-03 08:24:28Z

0

You did almost right, just a little correction:

 <ng-template #recursive let-cur="current">
     <ng-template [ngIf]="cur">
         <tr>
             <td>{{cur.field1}}</td>
         </tr>
         <ng-container [ngTemplateOutlet]="recursive"
             [ngTemplateOutletContext]="{ current: cur.next }">
         </ng-container>
     </ng-template
 </ng-template>

<ng-template ngFor let-item [ngForOf]="_myclasses">
     <ng-container [ngTemplateOutlet]="recursive"
         [ngTemplateOutletContext]="{ current: item }">
     </ng-container>
</ng-template>

But for may taste this looks weird and too complex. May be its better to just unroll that recursive class to a flat array before rendering?

answered Apr 3, 2019 at 8:24

Dimanoid

7,3497 gold badges48 silver badges62 bronze badges

Collectives™ on Stack Overflow

Angular 7, recursive object table rows

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related