Create a master table component and add child columns dynamically in angular

Question

Good morning everyone !

So have to create an application that displays many tables that all look the same (except their columns of course and the objects inside).

I have a master table component which can be summarized by:

<master-table>
  <!-- here I define the master table style, pagination, etc etc 
       which is the same everywhere -->
</master-table>

In the master table component TS file I have basically options that are relevant for every page where this kind of table should be displayed, such as filterDate, clearSelection etc etc etc nothing very special.

The point is, I don't want to repeat this code every where because it is not necessary, so my idea was to create several component that would extend the master table component.

It works fine for the typescript values, but I am stuck with the HTML.

In my master table HTML I would like at some point some kind of placeholder something like this:

<master-table>
  <standard-for-all-table></standard-for-all-table>

  <!-- insert here child columns -->
</master-table>

In the components that extends my master table I was imagining then something like:

<!-- child component -->
<master-table></master-table>
<child-column>column definition</child-column>

Doing this would allow me to define only the columns in the child components HTML and they would be added automatically to the parent HTML at runtime...

Any idea how to do this ?

Cheers and thanks !

basically you need a child component inside a more generic parent component? — Emanuele
– Emanuele, Commented Jul 10, 2018 at 9:40
I think you want to abstract the code as much as possible. So one option would be to create more different child-column components with many logic you want, and add it to the parent master-table based on your conditions. And you have to put your child-column component reference tag inside the html of the master-table component — Emanuele
– Emanuele, Commented Jul 10, 2018 at 9:47
If you want only one <child-column> inside one <master-table> and the child dynamically changes content based on condition you have to create a shared service (provider) between parent and child — Emanuele
– Emanuele, Commented Jul 10, 2018 at 10:01
I basically have let say a table, and this table has a TS and an HTML associated to it, then I have children that extend this table, for instance clients, users, houses etc. All of those would use that mother table and just add their own column, so I don't have to reuse the filter logic and add/remove logic etc etc which is already done in the mother. So at the end I would have many child columns depending on the child objects being displayed (either being clients, customers, whatever) — Olivier Alves
– Olivier Alves, Commented Jul 10, 2018 at 11:00
I have those providers already and the different children, now I would like for the child to use the parent HTML and fill it up with the missing columns that's the last step :) I don't want to have all the possible columns in my master table as I don't think it is the way to go, I could of course do that and do some ngSwitch and problem solved but honesty I don't like that approach... (maybe I am completely wrong) — Olivier Alves
– Olivier Alves, Commented Jul 10, 2018 at 11:04

Emanuele · Accepted Answer · 2018-07-10 21:24:25Z

Basically you have to create your main master-table component and your generic list chid-column component and insert it in your parent html template structure.

I've edit the final part hope in a better understanding way...

Then you can structure your child component to contain all the properties you need and thanks to *ngIf show only the properties you return from your provider methods i.e. getClients(), getUsers(), getHouses(), also thanks to the @Input decorator you can inject this data directly from the parent to the child and create many components you want with just a change of the data.

So in your parent you can have something like

import { Component } from '@angular/core';

import { MY_DATA_FROMP_ROVIDER } from './mydata/provider';

@Component({
  selector: 'master-table',
  template: `
    <ul>
     <child-column *ngFor="let item of items"
      [item]="item">
     </app-hero-child>
    </ul>
  `
})
export class MasterTableComponent {
  items:any

  constructor(public data: MYDATAFROMPROVIDER) {
      this.items = MYDATAFROMPROVIDER.myGetMethod();
}

And in your child

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

import { INTERFACE } from './mydata/interface';

@Component({
  selector: 'child-column',
  template: `
    <div *ngIf="item.id">{{item.id}}</div>
    <div *ngIf="item.name">{{item.name}}</div>
    <div *ngIf="item.address">{{item.address}}</div>
    <div *ngIf="item.phone">{{item.phone}}</div>
  `
})
export class ChildColumnComponent {
  @Input() item: INTERFACE;
}

If you want to go deeper: Component Interaction

lupa · Accepted Answer · 2018-07-10 10:19:38Z

-1

This guide is from official angular page Here
Here is the live sample of it

Not sure if these links could help.
But I actually worked on a project where we want to dynamically loading Child component into a Grid(Parent component).
And later on we can pass any component with different view inside the Grid
Guess that pretty close to your goal.

answered Jul 10, 2018 at 10:19

lupa

5272 silver badges7 bronze badges

Collectives™ on Stack Overflow

Create a master table component and add child columns dynamically in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related