How would you display recursive data in a table with angular2?

Question

I have a recursive data structure (recursive via children property) as below:

export interface IExecutableLog {
    round: number;
    log: string;
}

export interface IExecutableResult {
    uid: string;
    name: string;
    desc: string;
    status: string;
    passedRounds: number;
    totalRound: number;
    children?: IExecutableResult[];
    statementType?: string;
    logs?: IExecutableLog[];
}

export interface ISummary {
    title: string;
    jobName: string;
    timestamp: Date;
    tester: string;
    result: string;
    executionId: string;
    testJobId: string;
    resultDetails: IExecutableResult;
}

And I want to display data of Isummary type from backend.

I tried define a component as below:

// pats-report-element.component.ts
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { IExecutableResult } from '../pats-report.interface';

@Component({
    selector: 'pats-report-element',
    templateUrl: 'app/report/basic/pats-report-element.html',
    encapsulation: ViewEncapsulation.None,
})
export class  PatsReportElementComponent {
    @Input()
    public data: IExecutableResult;
}
// app/report/basic/pats-report-element.html
<tr>
    <td>{{data?.name}}</td>
    <td>{{data?.status}}</td>
    <td>{{data?.rounds}}</td>
    <td>{{data?.passedRounds}}</td>
    <td>{{data?.rounds > 0 ? (data.passedRounds / data.rounds) * 100 + "%" : "NA"}}</td>
    <td>{{data?.timestamp | date:"y-MM-dd HH:mm:ss"}}</td>
</tr>

<template [ngIf]="data && data.children">
    <template ngFor let-item [ngForOf]="data.children" let-i="index">
        <pats-report-element [data]="item"></pats-report-element>
    </template>
</template>

But the rendered DOM will include the host element 'pats-report-element' which is not valid inside a <table></table>tag. The DOM is as below:

I checked the angular2 doc, and seems attribute-directives is the right choice. But I cannot find a way to use template with attribute-directives just like what I do in PatsReportElementComponent.

So what's the correct way to achieve my goal?

[Update 1]

Tried @Günter Zöchbauer's suggestion, still not resolve my issue. The rendered DOM is still not as expected (the <tr></tr> still not being flattened).

Looks like stackoverflow.com/questions/37746516/use-component-in-itself/… and stackoverflow.com/questions/38716105/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 24, 2016 at 9:28
I don't think there is a way to do that. I think you need to flatten the data and then do *ngFor over the flattened data. — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 25, 2016 at 8:51
@GünterZöchbauer Yeah, seems like that's really not working ... not so nice. Flattening the data before providing it to the user can make the app quite slow, when large data is fetched. — PeMa
– PeMa, Commented Apr 26, 2018 at 12:37

Günter Zöchbauer · Accepted Answer · 2016-08-24 09:30:35Z

1

You can use an attribute selector

@Component({
  selector: '[pats-report-element]',

then you can add your element like

<tr pats-report-element [data]="item"></tr>

There is no way to get an element rendered without it's selector element.

answered Aug 24, 2016 at 9:30

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

4 Comments

ricky Over a year ago

Thanks for your answer! Can we use attribute selector with @Component? I only saw using attribute selector with @Directive. Would you please point where is the document? I've updated my code according to your answer, but there is exception: ` Template parse errors: Can't bind to 'data' since it isn't a known property of 'pats-report-element'. 1. If 'pats-report-element' is an Angular component and it has 'data' input, then verify that it is part of this module. ...`

Günter Zöchbauer Over a year ago

Works the same with @Component(). A component is a directive ;-) just with an additional view.

ricky Over a year ago

Got exception: zone.js:461 Unhandled Promise rejection: Template parse errors: Can't bind to 'data' since it isn't a known property of 'pats-report-element'. 1. If 'pats-report-element' is an Angular component and it has 'data' input, then verify that it is part of this module. 2. If 'pats-report-element' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. Could you see anything wrong?

ricky Over a year ago

Fix the exception and tried your approach, but still not get what I want. Please see my update on the origin post. Thanks again!

ricky · Accepted Answer · 2016-08-26 03:24:36Z

1

After many efforts, I still failed to get it done with native angular2. And I ended up with a 3rd party library--ag-grid-ng2. It works well except it's overkill for my requirements.

answered Aug 26, 2016 at 3:24

ricky

2,1284 gold badges28 silver badges50 bronze badges

Comments

Savaratkar · Accepted Answer · 2016-08-26 04:11:55Z

I am not sure if it will solve your problem, in the component you are referring to the same component recursively in the template, you should self-reference it in your directive.

// pats-report-element.component.ts import { Component, Input, ViewEncapsulation } from '@angular/core'; import { IExecutableResult } from '../pats-report.interface';

@Component({
    selector: 'pats-report-element',
    directives: [forwardRef(() => PatsReportElementComponent )], // <<<<<< change
    templateUrl: 'app/report/basic/pats-report-element.html',
    encapsulation: ViewEncapsulation.None,
})
export class  PatsReportElementComponent {
    @Input()
    public data: IExecutableResult;
}
// app/report/basic/pats-report-element.html
<tr>
    <td>{{data?.name}}</td>
    <td>{{data?.status}}</td>
    <td>{{data?.rounds}}</td>
    <td>{{data?.passedRounds}}</td>
    <td>{{data?.rounds > 0 ? (data.passedRounds / data.rounds) * 100 + "%" : "NA"}}</td>
    <td>{{data?.timestamp | date:"y-MM-dd HH:mm:ss"}}</td>
</tr>

<template [ngIf]="data && data.children">
    <template ngFor let-item [ngForOf]="data.children" let-i="index">
        <pats-report-element [data]="item"></pats-report-element>
    </template>
</template>

See if this works for you.

Evgeny Nozdrev · Accepted Answer · 2020-09-11 17:04:30Z

Recursive tables

You can put another <table> for level's childes inside <my-component-selector>. Just do it after current level's table tag closed:

<table>
    <tbody>
        <tr>
            <td>{{level.id}}</td>
            <td>{{level.title}}</td>
        </tr>
    </tbody>
</table>
<div *ngFor="let item of level.childLevels">
    <my-component-selector [level]="item">
         <!-- Here will be inserted another instance of this HTML file with itself table and itself recursion -->
    </my-component-selector>
</div>

Where you have component for each hierarhy level like this:

@Component({
    selector: 'my-component-selector',
    templateUrl: './my-recursive.component.html'
})
export class MyRecursiveComponent implements OnInit {

    @Input() level: LevelItem;

    onInit() {
        if (!level) {
             loadRootLevelByNetwork();
        }
    }

}

Here level variable are set from outer component by [level]="item" in HTML or loaded by network (for root component).

Collectives™ on Stack Overflow

How would you display recursive data in a table with angular2?

4 Answers 4

4 Comments

Comments

Comments

Recursive tables

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Recursive tables

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related