Add Table to Table Row Dynamically Angular 2

Question

I currently have an implementation of Angular2-Datatable like so

 <table class="table table-sm responsive" [mfData]="users" #mf="mfDataTable" [mfRowsOnPage]="10">
    <thead>
       <tr>
          <th>
              &nbsp;
          </th>
          <th>
             <mfDefaultSorter by="name">Name</mfDefaultSorter>
          </th>
          <th class="no-sort hidden-sm-down">
             <mfDefaultSorter by="role">Roles</mfDefaultSorter>
          </th>
       </tr>
    </thead>
    <tbody>
       <tr *ngFor="let person of mf.data">
          <td>
             <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-warning" (click)="open(person)">
                   <i class="fa fa-fw fa-edit"></i>
                </button>                      
          </td>
          <td>
             <h6>
                <span>
                    <a href="mailto:{{person.email}}">
                       <i class="fa fa-envelope"></i>
                    </a>
                 </span>
                 {{person.firstName}} {{person.lastName}}
             </h6>
          </td>
          <td>
             <h6>{{person.role}}</h6>
          </td>
       </tr>
       <tr *ngIf="(mf.data).length === 0">
          <td colspan="100">No matches</td>
       </tr>
    </tbody>
    <tfoot>
       <tr>
          <td colspan="12">
             <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
          </td>
       </tr>
    </tfoot>
 </table>

What I want to be able to do is create a child table when the open() handle is fired. I have done this before in Angular JS, but having a hard time figuring out how to do this with Angular 2. Do I need to create a new component and load the template into the row using jQuery?

Where do you want the new table to be inserted in this template? Should it work recursively (inserted table can insert one more inside itself etc)? — Dimanoid
– Dimanoid, Commented Dec 7, 2016 at 20:25

slaesh · Accepted Answer · 2016-12-08 09:56:05Z

I assume you want to load that table under the person's row.

You could try it like this, using the template-element.

<tbody>
   <!-- wrap that template-element around your row(s) -->
   <template ngFor let-person [ngForOf]="mf.data">
      <tr>
         <td>
            <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
               <button type="button" class="btn btn-warning" (click)="open(person)">
                  <i class="fa fa-fw fa-edit"></i>
               </button>                                 
            </div> <!-- this was missing ! -->
         </td>
         <td>
            <h6>
                <span>
                    <a href="mailto:{{person.email}}"><i class="fa fa-envelope"></i></a>
                </span>
                {{person.firstName}} {{person.lastName}}
            </h6>
         </td>
         <td><h6>{{person.role}}</h6></td>
      </tr>
      <!-- .. your new table will be shown under that 'data-row' .. -->
      <tr *ngIf="person.showDetails"> <!-- any condition here to show details .. ! -->
         <td>
            <table>
               <!-- insert your data here .. ! -->
            </table>
         </td>
      </tr>
   </template>
   <tr *ngIf="(mf.data).length === 0">
      <td colspan="100">No matches</td>
   </tr>
</tbody>

live-demo: https://plnkr.co/edit/pzOBJtg2S7sO2vckbUjr?p=preview

Schmalitz · Accepted Answer · 2017-06-26 14:17:31Z

0

In addition to this answer (and referring to https://plnkr.co/edit/pzOBJtg2S7sO2vckbUjr?p=preview) I added the following to my code to hide the opened elements (like an accordion):

toggleDetails(person: any) {
    for (let obj of this.persons) {
        obj.hasOwnProperty("showDetails") ? obj['showDetails'] = false : false;
    }
item.showDetails = !item.showDetails;
}

Two things I'm worrying about: Firstly not sure what happens if the Array of Objects persons is getting large in regards to performance. Secondly it would be nice to wire the showDetails property name to a variable (or even a const) which would be used in both the template and the component parts in regards to encapsulation and DRY.

edited Jun 26, 2017 at 14:17

answered Jun 22, 2017 at 15:28

Schmalitz

4501 gold badge8 silver badges17 bronze badges

2 Comments

Blackbam Over a year ago

If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review

Schmalitz Over a year ago

Well - have you read it? Its an answer which might be helpful for others with some worries - which again are helpful for further thoughts about the issue. If you think you need to over-rule this kind of communication - go for it. I will not come back to contribute.

Collectives™ on Stack Overflow

Add Table to Table Row Dynamically Angular 2

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related