Showing Details on Button Click Angular 2

Question

I have a requirement of showing details on click of every table data just below the button. On button click, it is displaying data but not beside the particular button but showing beside the first row data.

How to achieve this? Is there any better options available?

  <tr *ngFor="let data of datas | search:'Name':query">
     <td> <button id="button" type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" (click)="calculateValue(data.Name,data.value)">{{data.Name}}</button>
     <tr id="demo" class="collapse">
        <td>
            Price:{{value | number : '1.2-5'}}
        </td>
       </tr>
     </td>
     <td>{{data.LastValue | number : '1.2-8'}}</td>
    <td>{{data.High | number : '1.2-8'}} </td>
  </tr>

score 3 · Answer 1 · answered Jan 08 '18 at 15:37

3

Just change you data-target attribute with a unique one for each data. To do this, you can use "let i = index" into your "*ngFor" and use it in each iteration as following :

<tr *ngFor="let data of datas | search:'Name':query; let i = index">
     <td> <button id="button" type="button" class="btn btn-info" data-toggle="collapse" data-target="#{{i}}" (click)="calculateValue(data.Name,data.value)">{{data.Name}}</button>
     <tr id="{{i}}" class="collapse">
        <td>
            Price:{{value | number : '1.2-5'}}
        </td>
       </tr>
     </td>
     <td>{{data.LastValue | number : '1.2-8'}}</td>
    <td>{{data.High | number : '1.2-8'}} </td>
  </tr>

More details here : ngFor with index as value in attribute

answered Jan 08 '18 at 15:37

André DS

1,823
1
14
24

I am trying as per your suggestion but getting below error: Error: Template parse errors: Can't bind to 'target' since it isn't a known property of 'button'. ("t i=index"> – SUBHASIS MONDAL Jan 08 '18 at 16:48
It is showing the details as I wanted but I want to collapse other div data associated to button when a new one is expanded on button click. How can I achieve that ? I have tried bootstrap accordion but no help. – SUBHASIS MONDAL Jan 09 '18 at 05:47
@SUBHASISMONDAL data-parent may help you ! Please see : https://stackoverflow.com/questions/11476670/bootstrap-collapse-other-sections-when-one-is-expanded – André DS Jan 09 '18 at 07:54

score 0 · Answer 2 · answered Jan 08 '18 at 15:30

You have #demo in every cell, that is invalid HTML. You can only have one unique HTML Element ID per page, and browsers will tolerate your mistakes, but it will always return the first instance. Perhaps something like this would work:

 <button id="button" type="button" class="btn btn-info" data-toggle="collapse"
[data-target]="'#demo' + data.uniqueId"
(click)="calculateValue(data.Name,data.value)">{{data.Name}}</button>
<tr [id]="'demo' + data.uniqueId" class="collapse">

This might work, but depends what you use to show this data, e.g. ng-bootstrap or ngx-bootstrap or similar, or some other library, or something not-angular.

I have tried this one as well but getting below error:Error: Template parse errors: Can't bind to 'data-target' since it isn't a known property of 'button'. ("t i=index"> — SUBHASIS MONDAL, Jan 08 '18 at 16:51

score 0 · Answer 3 · answered Jan 08 '18 at 17:29

I have made few changes and it is working now:

<tr *ngFor="let data of datas | search:'Name':query;let i = index">
     <td> <button id="button" type="button" class="btn btn-info" data-toggle="collapse" attr.data-target="#demo{{i}}" (click)="calculateValue(data.Name,data.value)">{{data.Name}}</button>
     <tr id="demo{{i}}" class="collapse" id="insidetr">
       Price:{{value | number : '1.2-5'}}
       </tr>
     </td>
     <td>{{data.LastValue | number : '1.2-8'}}</td>
    <td>{{data.High | number : '1.2-8'}} </td>
  </tr>

Showing Details on Button Click Angular 2

3 Answers3