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?

Answer 1

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.

Answer 2

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