1

I have a component which have following html 

<table>
<thead>
<tr>
<th>
</tr>
</thead>
<tbody>
<ng-container #container class="sample">

</ng-container>
 </tbody>
</table

And another component is having single tr(table rows) i.e. 

<tr>
 <input class="form-control form-control-text-input" type="text" placeholder="Enter ID" [(ngModel)]="id"/>
</tr>

Now i am adding this table row component dynamically using this answer Dynamically ADDING and REMOVING Components in Angular

But when it is rendered on browser i got following Click on image

Dynamic component is rendered in a div but i just want tr inside tbody.

Please help.

UPDATE:i have created a dummy on stackblitz Stackblitz

DSP
  • 78
  • 10

1 Answers1

0

I made two changes (screenshot below also)

  1. In the add-timeseries-row.component.ts file, make change to the selector:

import { Component } from '@angular/core';

@Component({
  selector: 'add-timeseries-row',
  templateUrl: './add-timeseries-row.component.html',
  styleUrls: ['./add-timeseries-row.component.css']
})
export class AddTimeseriesRowComponent {
 id1:string;
 id2:string;
 id3:string;
}
  1. In add-time-series.component.css add this

add-timeseries-row {
    display: contents;
}

The 2 changes and their effect on the result...

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
  • if you want the div, adding this in add-time-series.component.css would get the job done also... : .time-series-table-body > div { display: contents; } – Akber Iqbal Dec 27 '18 at 12:50
  • Thanks a lot Akber,Now i am thinking how stupid i am ,i focused on angular but the solutions was only a css. – DSP Dec 27 '18 at 12:59
  • I'm glad I could help, this is where stackOverflow is so helpful... Lots of learning opportunities... – Akber Iqbal Dec 27 '18 at 13:07