How to show inline details for html table with a toggle button using typescript

Question

I need to create a toggle button for my table (to show/hide) more details of selected row.

Given this is my table:

<table>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr *ngFor='let c of companies'>
            <td><button id="{{c.companyId}}" (click)="showDetail()">Details</button> </td>
            <td>{{ c.company}}</td>
            <td>{{ c.contact}}</td>
            <td>{{ c.country }}</td>
        </tr>
    </table>

When I click on "Details" button, need to show details inline in the table. This is kind of master detail grid approach in Kendo Grid. Any better approach using Angular2 & typescript to show details in easy way?

Can you create a working example in jsbin or jsfiddle ?

paulpeters
– paulpeters

2017-04-21 17:03:24 +00:00
Commented Apr 21, 2017 at 17:03 — paulpeters
– paulpeters, Commented Apr 21, 2017 at 17:03

AVJT82 · Accepted Answer · 2017-04-21 20:26:30Z

2

A small change from birwin's answer, as you cannot use template here without a directive, so use ng-container instead.

<ng-container *ngFor='let c of companies'>
    <tr>
        <td><button id="{{c.companyId}}" (click)="c.details = !c.details">Details</button> </td>
        <td>{{ c.company}}</td>
        <td>{{ c.contact}}</td>
        <td>{{ c.country }}</td>
    </tr>
    <tr *ngIf="c.details">
        <td>Details</td>
    </tr>
</ng-container>

Demo

answered Apr 21, 2017 at 20:26

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

Comments

birwin · Accepted Answer · 2017-04-21 20:51:54Z

1

You could try something like this:

<table>
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <ng-container *ngFor='let c of companies'>
        <tr>
            <td><button id="{{c.companyId}}" (click)="c.details = !c.details">Details</button> </td>
            <td>{{ c.company}}</td>
            <td>{{ c.contact}}</td>
            <td>{{ c.country }}</td>
        </tr>
        <tr *ngIf="c.details">
            <td>Details go here</td>
            <td>More details</td>
            <td>More details</td>
        </tr>
    </ng-container>
</table>

edited Apr 21, 2017 at 20:51

answered Apr 21, 2017 at 17:04

birwin

2,6943 gold badges25 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to show inline details for html table with a toggle button using typescript

2 Answers 2

Demo

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related