Change standard behavior of Angular2 Component

Question

I have a Component with table template.

This is part:

<tr *ngFor="let stat of statistic" class="stripped">
        <td>{{stat.date         | date:"shortDate"}}</td> 
        <td>{{stat.hits         | number }}</td>
        <td>{{stat.unique       | number }}</td>
        <td>{{stat.registrations| number }}</td>
        <td>{{stat.conversion   | number }}</td>
        <td>{{stat.deposit      | number }}</td>
        <td>{{stat.ftd          | number }}</td>
        <td class="bold">{{stat. deals | number }}</td>
        <td class="bold colored">{{stat.profit| currency:'USD':true:'1.2' }}</td>
</tr>

But instead of tr I need to insert two. If I try to use it as another component, a table breaks.

Is there a tricky way to insert another tr after each tr in cycle? Or maybe has a way of exchange Component selector on his template

@PardeepJain yes and no) I need to insert two tr with same data but different structure. — Illorian, May 28 '16 at 05:05
Using bootstrap grid system instead of table can do the trick — Arun Ghosh, May 28 '16 at 05:08

score 1 · Accepted Answer · answered May 28 '16 at 05:17

as you said in comment you want to use same data but want two tr so you can try this one :-

<template ngFor let-stat [ngForOf]='statistic'>
    <tr class="stripped">
        <td>{{stat.date | date:"shortDate"}}</td>
        <td>{{stat.hits | number }}</td>
        <td>{{stat.unique | number }}</td>
        <td>{{stat.registrations| number }}</td>
        <td>{{stat.conversion | number }}</td>
        <td>{{stat.deposit | number }}</td>
        <td>{{stat.ftd | number }}</td>
        <td class="bold">{{stat. deals | number }}</td>
        <td class="bold colored">{{stat.profit| currency:'USD':true:'1.2' }}</td>
    </tr>
    <tr class="stripped">
        <td>{{stat.date | date:"shortDate"}}</td>
        <td>{{stat.hits | number }}</td>
        <td>{{stat.unique | number }}</td>
        <td>{{stat.registrations| number }}</td>
        <td>{{stat.conversion | number }}</td>
        <td>{{stat.deposit | number }}</td>
        <td>{{stat.ftd | number }}</td>
        <td class="bold">{{stat. deals | number }}</td>
        <td class="bold colored">{{stat.profit| currency:'USD':true:'1.2' }}</td>
    </tr>
</template>

see here for more tricky way of using *ngFor in angular2 https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

Thanks. I really forgot about templates – Illorian May 28 '16 at 05:38 — Illorian, May 28 '16 at 05:38

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

You can use tbody

<tbody *ngFor="let stat of statistic" class="stripped">
   <tr></tr>
   <tr></tr>
</tbody>

Form this answer you can have multiple tbody in a table.

Using bootstrap grid system instead of table can do the trick.

edited May 23 '17 at 10:30

Community

1
1

answered May 28 '16 at 05:10

Arun Ghosh

7,634
1
26
38

Is think it's not valid layout – Illorian May 28 '16 at 05:38
@Illorian its valid but this does't make sense to repeat `tbody` may cause some design issue later so better to use `template` that we already have. – Pardeep Jain May 28 '16 at 05:39

Change standard behavior of Angular2 Component

2 Answers2