vmware-clarity

Conditional Clarity Datagrid Expandable Rows

My data model is a matrix with several rows, some of those rows have detail information that I would like to show using the Clarity Datagrid Expandable Rows. Here is a simple version of what I am trying to build:

<clr-datagrid>
  <clr-dg-column>Artifact</clr-dg-column>
  <clr-dg-column>Category</clr-dg-column>
  <clr-dg-row>
    <clr-dg-cell>AAA</clr-dg-cell>
    <clr-dg-cell>111</clr-dg-cell>
    <ng-container *ngIf="true">
      <clr-dg-row-detail *clrIfExpanded>
        <clr-dg-cell>BBB</clr-dg-cell>
        <clr-dg-cell>222</clr-dg-cell>
      </clr-dg-row-detail>
    </ng-container>
  </clr-dg-row>
  <clr-dg-row>
    <clr-dg-cell>CCC</clr-dg-cell>
    <clr-dg-cell>333</clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>

I was expecting to see something like the following:

enter image description here

Unfortunately this is the result that I am getting:

enter image description here

This issue happen when I wrap the clr-dg-row-detail with any element (e.g. div, ng-container etc). I need a wrap element to put a conditional expression because not every row has detail info.

Does anyone has a suggestion to do that?

Solution

  • You need to use ngProjectAs, which is not documented so there wasn't much you could do other than asking. This is what it looks like:

    <ng-container ngProjectAs="clr-dg-row-detail" *ngIf="true">
  <clr-dg-row-detail *clrIfExpanded>
    <clr-dg-cell>BBB</clr-dg-cell>
    <clr-dg-cell>222</clr-dg-cell>
  </clr-dg-row-detail>
</ng-container>