CODEWITHSUNDEEP
javascripthtmlangular
mittal bhatt
mittal bhatt

Reputation: 1009

class selector mess up the rendering of the table in angular 2

I want to make a TableRowsComponent in angular 2 that renders to a number of table rows.

I would like to use it in a template like this:

<table class>
    <tbody>
        <teams-players-list *ngFor="#item of list" [someInput]="item"></teams-players-list>
    </tbody>
</table>
(So "teams-players-list" would be the selector of the TableRowsComponent here) The template of the TableRowsComponent would be something like:

<tr>
    <td> foo </td> 
    <td> bar </td>
</tr>
<tr *ngIf="something">
    ....
</tr>
<tr *ngFor="..">
     ...
</tr>
If we were to do this then the result looks like this:

<table class>
        <tbody>
            <teams-players-list>
                <tr>
                    ...
                </tr> 
                <tr>
                    ...
                </tr> 
            </teams-players-list>
            <teams-players-list>
                <tr>
                    ...
                </tr> 
                <tr>
                    ...
                </tr> 
            </teams-players-list> 
        </tbody>
</table>

Unfortunately the < teams-players-list > elements mess up the rendering of the table. How to solve this problem? Is there maybe a way to make angular2 not render the < teams-players-list > elements?

Upvotes: 3

Views: 64

Answers (1)

NickMcB
NickMcB

Reputation: 927

You could change the 'selector' to a property rather than an element tag e.g.:

@Component({
  selector: '[teams-players-list]', // this sets the selector to a <tr teams-players-list></tr> tag property
  ...
})
export class TableRowsComponent { ... }

rather than:

@Component({
  selector: 'teams-players-list', // this sets the selector to a <teams-players-list></teams-players-list> tag
  ...
})
export class TableRowsComponent { ... }

Then in your table use the component like this:

<table class>
  <tbody>
    <tr teams-players-list *ngFor="#item of list" [someInput]="item"></tr>
  </tbody>
</table>

You would need to remove the <tr></tr> tags from the TableRowsComponent

Upvotes: 1

Related Questions