Table Rows in component in angular 2

Question

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>
        <table-rows *ngFor="#item of list" [someInput]="item"></table-rows>
    </tbody>
</table>

(So "table-rows" 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>
            <table-rows>
                <tr>
                    ...
                </tr> 
                <tr>
                    ...
                </tr> 
            </table-rows>
            <table-rows>
                <tr>
                    ...
                </tr> 
                <tr>
                    ...
                </tr> 
            </table-rows> 
        </tbody>
</table>

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

You may want to check this out stackoverflow.com/questions/38463346/… — Harry Ninh
– Harry Ninh, Commented Jul 25, 2016 at 13:26
Thanks for the reference. It is almost a good solution, but if you check the plunkr there the solution has each < tr > ... < /tr > inside its own < tbody > ... < /tbody > :( — Ward Beullens
– Ward Beullens, Commented Jul 25, 2016 at 14:16

thunk · Accepted Answer · 2017-03-01 14:46:13Z

2

you can use [table-rows] rather than table-rows when naming your selector.

e.g.

`@Component({
    moduleId: module.id,
    selector: '[table-rows]',
    templateUrl: 'table-rows.component.html'
})`

and then simply use it within the tbody tag, ala <tbody table-rows></tbody>

answered Mar 1, 2017 at 14:46

thunk

5743 silver badges12 bronze badges

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

Comments

InderMoga · Accepted Answer · 2017-01-07 10:13:01Z

0

import { Component, Input, OnChanges } from '@angular/core';
import { FormGroup, FormBuilder, NgForm, REACTIVE_FORM_DIRECTIVES, Validators } from '@angular/forms';

    @Component({
      selector: '[dependent-row]',
      providers: [],
      template: `
        <tr [formGroup]="dependentForm">
          <td>
            <input type="text" formControlName="foo">
          </td>
          <td>
            <input type="text" formControlName="bar">
          </td>
        </tr>
      `,
      directives: [REACTIVE_FORM_DIRECTIVES]
    })
    export class DependentRowComponent implements OnChanges {
      @Input() dependent: any;
      _Form: any;

      constructor(fb: FormBuilder) {
        this.dependentForm = fb.group({
          foo: [''],
          bar: [''],
        })
      }

      ngOnChanges() {
        this._Form.find('foo').updateValue(this.dependent.foo);
        this._Form.find('bar').updateValue(this.dependent.bar);
      }
    }

answered Jan 7, 2017 at 10:13

InderMoga

113 bronze badges

2 Comments

AVJT82 Over a year ago

It is good that you are offering a solution, but your answer should always contain some explanation along with code. Thank you!

Toby Speight Over a year ago

Whilst this code snippet is welcome, and may provide some help, it would be greatly improved if it included an explanation of how it addresses the question. Without that, your answer has much less educational value - remember that you are answering the question for readers in the future, not just the person asking now! Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply.

Collectives™ on Stack Overflow

Table Rows in component in angular 2

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related