Say I have a parent with the view <foo /><bar /><baz /> , is it possible for <bar /> to determine somewhere in its lifecycle its index in the parents view?
#Is it possible to get the order of components in the view of their parent?
bold olive
deft cypress
You should explain what you really want to achieve, because there's probably a better solution than the one you're considering.
bold olive
I have a table component that is similar in design to the CDK table, except that their solution is to use an array of keys to manually set the order/visibility of columns in the row definition directive. However, I am trying to make an abstraction where the order of the columns as defined in the template view is (usually) the order I want the columns to be rendered in.
One abstraction is that I'm defining a set of columns in one place that can be reused across multiple tables, and that register themselves to the main table component during init, and this works really well, except that the order gets jumbled because the 'normal' other columns have the order as determined by contentChildren and I would like for the column groups to remain in the same order. An example like this:
<app-table>
<app-column name="foo" />
<app-transactions-columns />
<app-column name="bar" />
</app-table>
Where <app-transaction-columns /> contains something like <app-column name="baz" /> or something and the order is 'kept' as foo, baz, bar
And where <app-transactions-columns /> has an afterRenderEffect that does something like inject(TableComponent).registerColumn(this)
If `TransactionColumns knew its index in its parent's view, I can tell it to keep itself in the list of columns that table renders at index 1
Fyi, the table component already renders the columns in the other of the contentChildren(ColumnComponent), but that excludes the columns in <app-transaction-columns /> because they register themselves and thus don't show up in the array of contentChidlren
Granted, it's a bit of a weird problem to have haha
This wouldn't actually be necessary if contentChildren could somehow query 'inside' its own contents for their contentChidlren
deft cypress
contentChildren has a descendants option. No idea if it can solve your issue though.
But I guess you could also delegate to app-transactions-columns to ask it for all its inner columns.
bold olive
I think descendants only works for stuff like
<app-table>
<app-column name="foo" />
<div>
<app-column name="bar" />
</div>
</app-table>
Not the case where the column is wrapped in the view of a child
No, it's more about <app-transaction-columns> needing its own index in its parent so it can tell its child column that their index is self+n
deft cypress
Couldn't the parent get the index of all its children (including app-transactions-columns), and since app-transactions-columns is a column container, ask it its sub-columns?
bold olive
In theory yes, but I want the app-table to be agnostic of the existence of column groups hehe
I think the solution here would be to have a host directive in TransactionColumns and query that in the table component
That would genuinely solve this, but if I could somehow know the index of a child in its parent I could go forego this extra directive
deft cypress
Not sure how it would help, but given that you can get the children in order in a parent, and a child know about its parent, it can ask for its index to its parent.
bold olive
What do you mean?
Ooh like that
Yes, but the children in the case of a wrapped component don't show up in contentChidlren, so in that case it doesn't know its order
Even the moment of construction can be different (if for example a column is conditionally rendered based on an async observable)