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
– Illorian, Commented May 28, 2016 at 5:05
Using bootstrap grid system instead of table can do the trick — Arun Ghosh
– Arun Ghosh, Commented May 28, 2016 at 5:08

Pardeep Jain · Accepted Answer · 2016-05-28 05:17:31Z

1

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

answered May 28, 2016 at 5:17

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

1 Comment

Illorian Over a year ago

Thanks. I really forgot about templates

Community · Accepted Answer · 2017-05-23 10:30:53Z

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, 2017 at 10:30

CommunityBot

11 silver badge

answered May 28, 2016 at 5:10

Arun Ghosh

7,7741 gold badge28 silver badges38 bronze badges

2 Comments

Illorian Over a year ago

Is think it's not valid layout

Pardeep Jain Over a year ago

@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.

Collectives™ on Stack Overflow

Change standard behavior of Angular2 Component

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related