How to dynamically add a component in a table tr forloop in Angular 2

Question

I have a table which loops through each row. When a use clicks a link in the row, I can create a child row below. The problem is, this child row, I would like it to be a component so I can pass data to it. Is this possible?

My code is below account.component.html

 <tr *ngFor="let account of accounts">
                        <td (click) ="showChildRow($event, account)" >{{ account.name }}</td>
                        <td>{{ account.id }}</td>
                    </tr>

account.component.ts

showChildRow(event:any, account: Object){
  var tableId = $(event.target).closest('table')[0].id;
  var table = $('#' + tableId).DataTable();
  var tr = $(event.target).closest('tr');
  var row = table.row( tr );

  if ( row.child.isShown() ) {

      $('div.slider', row.child()).slideUp( function () {
        row.child.hide();
        tr.removeClass('shown');
      } );
  }
  else {

      this.accountService.getAccountInfo(account.id)
                      .subscribe(
                        data => this.format(data, row, tr),
                        error =>  this.errorMessage = <any>error
                      )

  }
}


format ( data, row, tr ) {

  var childRow = '<div class="slider col-xs-12">'+
                    '<child-component [data] ="data"></child-component>' //HOW TO DYNAMICALLY ADD COMPONENT?
                 '</div>';

  row.child(childRow).show();
  tr.addClass('shown');
  $('div.slider', row.child()).slideDown();
}

Günter Zöchbauer · Accepted Answer · 2017-02-15 16:07:59Z

2

You need to use a attribute selector, because <table> doesn't allow arbitrary tags

<table>
  <tr myAccount *ngFor="let account of accounts>
</table>

@Component({
  selector: '[myAccount]',
  ...
})

answered Feb 15, 2017 at 16:07

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

Collectives™ on Stack Overflow

How to dynamically add a component in a table tr forloop in Angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related