CODEWITHSUNDEEP
angularhtml-table
A. Gladkiy
A. Gladkiy

Reputation: 3450

angular 2+ table row details feature

I have Angular 8 app and I have table:

<table>
    <thead>
        <tr>
            <th>...</th>
            ...
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of items">
            <td (click)="toggleDetails(item)">...</td>
            <td>...</td>
            ...
        </tr>
    </tbody>
</table>

<span id="details-row" *ngIf="expandedItem">
    <a (click)="convertFile(expandedItem.id, 'pdf')" class="pointer ml-3">
        <i class="far fa-file-pdf"></i> Download as PDF
    </a>
</span>

in my .ts file I have:

toggleDetails(item: any) {
    this.expandedItem = item;
    //todo if row isn't clicked -> insert document.getElementById("details-row").innerHTML new table row after row I clicked and angular bindings must work (I mean click handler)
    //todo if this row is already clicked -> remove this new table row 
}

convertFile(id: number, format: string) {
    console.log(id);
    console.log(format);
}

I can't use multiple tbodys.

How can I implement my todos? Or are there other ways to implement that?

Upvotes: 0

Views: 249

Answers (2)

ischenkodv
ischenkodv

Reputation: 4255

Try to use ng-container to iterate over your items:

<ng-container *ngFor="let item of items"">
    <tr>
        <td (click)="toggleDetails(item)">...</td>
        <td>...</td>
        ...
    </tr>
    <tr id="details-row" *ngIf="expandedItem">...</tr>
</ng-container>

To select or deselect item when clicking on the row:

toggleDetails(item: any) {
    this.expandedItem = item === this.expandedItem ? null : item;
}

Upvotes: 1

Leandro
Leandro

Reputation: 189

I have build a small working example:

https://stackblitz.com/edit/angular-zsnqse?embed=1&file=src/app/app.component.html

Upvotes: 1

Related Questions