Create an Angular component to display a set of html table cells to embed in other tables

Question

I have a lot of html tables that share the same 15 columns along with custom columns that are specific for each table. I would like to create these common 15 columns as a component that takes in a set of data and shows up as the 15 td's without a wrapper. I can't figure out how to create an Angular component that doesn't show the wrapper tag in the DOM and allows me to pass in input. Below is kind of what I'd like to do:

<tr *ngFor="let item of items">
  <td>Column 1</td>
  <my-common-columns [data]="item"></my-common-columns>
  <td>Another column</td>
</tr>

Unfortunately with the above code, <my-common-columns> tag shows up in the rendered DOM, which messes up the table. I can only have td's under the tr tag.

I also tried <ng-container *ngComponentOutlet="myCommonColumns"> since ng-container's don't show up in the DOM, but I can't figure out how to pass data into it.

Ilia Volk · Accepted Answer · 2018-03-11 22:47:59Z

5

import { Component, TemplateRef, ViewChild } from '@angular/core';

@Component({
  selector: 'my-common-columns',
  template: `<ng-template let-item>
  <td>inner item1:{{item}}</td>
  <td>inner item2:{{item}}</td>
  </ng-template>`
})
export class CommonComponent {
  @ViewChild(TemplateRef) template: TemplateRef<any>;
}


@Component({
  selector: 'my-app',
  template: `
  <table>
    <tr *ngFor="let item of data">
      <td>first</td>
      <ng-template [ngTemplateOutlet]="common.template"
                 [ngTemplateOutletContext]="{$implicit: item}">
      </ng-template>
      <td>last</td>
    </tr>
  </table>
<my-common-columns #common></my-common-columns>
  `
})
export class AppComponent  {
  data = [1, 2, 3, 4, 5];
}

live example

result:

ngComponentOutlet will show tag in HTML too. Either, you should use abstraction to display tables for complex problems.

edited Mar 11, 2018 at 22:47

answered Mar 11, 2018 at 22:41

Ilia Volk

5563 silver badges9 bronze badges

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

1 Comment

Jeremy Over a year ago

Wow that's really clever. I think that does solve it. Thanks! I do feel like Angular should make this easier to do with a way to not render the parent tag, but this does the trick I guess.

Johan Swanepoel · Accepted Answer · 2018-03-11 20:56:26Z

1

Depending on your data structure you could probably do something like:

<td *ngFor="let col of item">{{ col }}</td>

answered Mar 11, 2018 at 20:56

Johan Swanepoel

4724 silver badges13 bronze badges

1 Comment

Jeremy Over a year ago

I should have said that there's a lot of formatting differences between those included cells. Some of those <td>'s that are shared among tables have various styles or content that isn't just a simple {{col}}

DiPix · Accepted Answer · 2018-03-11 23:00:35Z

0

You have to use your component as a attribute. So put it to <td my-common-column></td> and in your component change selector: [my-common-column]. These [ ] brackets allows you to use component as attribute.

answered Mar 11, 2018 at 23:00

DiPix

6,08318 gold badges76 silver badges123 bronze badges

2 Comments

Jeremy Over a year ago

But I need a set of 15 <td> cells. I want to just have 1 component that injects all 15 cells.

DiPix Over a year ago

Then put *ngFor above or inside the component

Alex Seitz · Accepted Answer · 2018-03-11 20:52:44Z

-1

Why don't you use the code below?

<tr *ngFor="let item of items">
  <td>Column 1</td>
  <td> {{ item }}</td>
  <td>Another column</td>
</tr>

answered Mar 11, 2018 at 20:52

Alex Seitz

1093 bronze badges

1 Comment

Jeremy Over a year ago

There's a large number of <td> cells I want to include.

Collectives™ on Stack Overflow

Create an Angular component to display a set of html table cells to embed in other tables

4 Answers 4

1 Comment

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related