CODEWITHSUNDEEP
angularaccordion
Aakriti.G
Aakriti.G

Reputation: 686

How to use accordion with a table angular2

I am trying to use accordion and have no idea how to use it with table.

I have a table and in that table I am getting records form my component and displaying them using *ngFor. Now on click of a row I need to replace that row with another component so I am trying to use accordion for that.

sample: 

<table class="table">
    <tbody>
        <tr *ngFor="let game of games; let i = index">
            <td>{{game.date}}</td>
            <td>{{game.label}}</td>
            <td>{{game.score}}</td>
        </tr>
    </tbody>
</table>

This is a simple table and on click of any row I want to replace that row with a praticular content.

sample accordion I need to use in table:

<accordion>
        <accordion-group heading="About me">
            <app-member></app-member>
        </accordion-group>
        <accordion-group>
            <accordion-heading>
                Custom heading
            </accordion-heading>
            <app-member></app-member>           
        </accordion-group>
</accordion>

Any idea How can I use accordion for this ? Thanks

Upvotes: 2

Views: 3513

Answers (1)

Abhishek Ekaanth
Abhishek Ekaanth

Reputation: 2569

You can make use of simple CSS and make it simple.

HTML

   <table class="table">
    <tbody>
        <tr *ngFor="let game of games; let i = index" [ngClass]="{activetab: isActive(game.label)}">
            <div (click)="getSub(game.label);">
                <!-- use the uniqueId here  -->
                <td>{{game.date}}</td>
                <td>{{game.label}}</td>
                <td>{{game.score}}</td>
            </div>
            <table>
                <tbody [ngClass]="{activetab: isActive(game.label)}">
                    <tr *ngFor="let subgame of game.sub">
                        <td>{{subgame.date}}</td>
                        <td>{{subgame.label}}</td>
                        <td>{{subgame.score}}</td>
                    </tr>
                </tbody>
            </table>
        </tr>
    </tbody>
</table>

CSS

tr .activetab {
    display: block !important;
}

TS

      isActive(id) {
        return this.selected === id;
      }

     getSub(id) {
   //TODO//
    this.selected = (this.selected === id ? null : id);
  }

I think this should work fine.

EDIT: You can refer the same example on https://plnkr.co/edit/B66nuR?p=preview

Upvotes: 2

Related Questions