Angular 2 RC1 Multiple components one table

Question

Overview: I am developing a Todo list using Angular 2 and an API I developed earlier. Currently, the functionality of the front and back end is completed. My new goal is to link the components of the todo list together, under one HTML table. The todo list is in one component html file (tasklist.component.html) and a sorting component in another (sort.component.html). These two components are held under the parent component (todo.component.html).

Parent Component (todo.component.html):

<h1>
  {{title}}
</h1>

<app-addtask> </app-addtask>
<app-search> </app-search>

<table border="1" style="width:100%">

  <app-sort> </app-sort> <!-- Headers -->

  <app-tasklist> </app-tasklist> <!-- Content -->

</table>

tasklist component:

<td (click)=completeTask(item) style="width:75px;">
    <input type="checkbox" name="complete" *ngIf="!item.IsComplete" >
    <input type="checkbox" name="complete" *ngIf="item.IsComplete" checked="checked">
</td>

<td (click)=completeTask(item)> 
    <p *ngIf="item.IsComplete" style="text-decoration: line-through;">  {{item.Name}}  </p>
    <p *ngIf="!item.IsComplete" >  {{item.Name}}  </p>
</td>
<td style="width:250px;"(click)=completeTask(item) > 
    <p *ngIf="item.IsComplete" style="text-decoration: line-through;">  {{item.DueDate}}  </p>
    <p *ngIf="!item.IsComplete" >  {{item.DueDate}}  </p>
</td>

<!--<app-deletetask></app-deletetask>-->

<td style="width:115px;">
    <button type="button" (click)="deleteTask(item, $event)">Delete</button> 
</td>

sort component:

  <td style="width:75px;" (click)="Sort('iscomplete')"><a>Complete</a></td>
  <td (click)="Sort('name')"><a>Name</a></td>
  <td style="width:250px;" (click)="Sort()"><a>Due Date</a></td>
  <td style="width:115px;">Option</td>

If I combine all of the components together I can get the data to display correctly. However, with the way it is now, a tbody tag is being generated which throws off the columns. Ignore the ugly formatting.

web page currently with dev tools

How do I have separate components and utilize them correctly with respect to vies.

Answer 1

Please take a look at this answer .

Basically if you want a structure of a table try to put appropriate components with attribute selector rather than custom tag.