0

Backstory:

I'm building a group-able data table in an Angular 10 app, in which I would like to DRY as much as possible.

The idea is that the user can "group-by" any number of columns in the list

"group by eye color" then "group by hair color"

eye-color: green:
  |___hair-color: brown:
    |___User 1
    |___User 2
    |___hair-color: blonde:
      |___User 3
      |___User 4
eye-color: brown:
  |___hair-color: brown:
    |___User 5
    |___User 6
  |___hair-color: blonde:
    |___User 7
    |___User 8

The data's not important, just for context.

There's a lot of files involved so I'll summarize with pseudo code:

My top level component would look like so:

<!-- Show either the plain list or the groups, depending on group-by  -->
<div *ngIf="groupBy">
  <item-table ... ></item-table>
</div>

<div *ngIf="!groupBy">
  <item-group-list ... ></item-group-list>
</div>

Then, within the component, iterating through each grouping leads to another single-group component

<div *ngFor="let group of groupList">
  <span>{{ group.count }} {{ group.label }}</span>

  <single-group ... ></single-group>

</div>

Finally, within the single-group component, there are two conditions:

  1. The group is the end of the tree, in which I just show the list for that group.
  2. The group has sub-groups, in which I want to recurse and show the group-list, now embedded and filtered down.
<div *ngIf="!hasSubGroups()">
  <item-table ... ></item-table>
</div>

<div *ngIf="hasSubGroups()">
  <item-group-list ... ></item-group-list>
</div>

The issue, is that this is causing a circular dependency back to item-group-list.

e.g:

<top-level-component>
  |__<item-table>
OR|
  |__<item-group-list>         <------
       |                              |
       |__<single-group>              |
            |__<item-table>           |
          OR|                         |
            |__<item-group-list>   ---

Sometimes the page loads and works beautifully, as intended. Other times however, I get an error:

Cannot access 'ItemGroupListComponent' before initialization at Module.ItemGroupListComponent

This error seems to happen at random, leading me to believe it's something with the load order, caused by this circular reference. A few other posts also seem to point to that.

If I create a separate, duplicate "item-group-list" component that's only used as a sub-list, it works fine but I'd like to avoid that if I can.

Any ideas?

Aluan Haddad
  • 29,886
  • 8
  • 72
  • 84
Jesse Williams
  • 436
  • 4
  • 17
  • i don't know about Ur code but i want to send you an image. i want to view it as more of a algoirthm question.can you not optimize your algorithm like this? https://ibb.co/3vYDjKD –  Sep 08 '20 at 21:25
  • Could you filter the duplicate components out of the subgroup when a user selects a grouping or with a pipe? it wouldn't make sense to have `brown hair > green eyes > brown hair` – rhavelka Sep 08 '20 at 21:30
  • 1
    This pattern is not an issue. I've implemented it myself in a project. The question is - what data are you providing for your components? It sounds like you have a circular reference because of the data you pass in to the children. Maybe you can try setting up an easier example on stackblitz and share with us? – Salmin Skenderovic Sep 08 '20 at 21:44
  • That absolutely works I've done much the same. When the error occurs, does it happen before the application bootstraps? – Aluan Haddad Sep 09 '20 at 00:25

0 Answers0