title: Conditional Clarity Datagrid Expandable Rows
body: <p>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:</p>
  
  <pre><code>&lt;clr-datagrid&gt;
    &lt;clr-dg-column&gt;Artifact&lt;/clr-dg-column&gt;
    &lt;clr-dg-column&gt;Category&lt;/clr-dg-column&gt;
    &lt;clr-dg-row&gt;
      &lt;clr-dg-cell&gt;AAA&lt;/clr-dg-cell&gt;
      &lt;clr-dg-cell&gt;111&lt;/clr-dg-cell&gt;
      &lt;ng-container *ngIf="true"&gt;
        &lt;clr-dg-row-detail *clrIfExpanded&gt;
          &lt;clr-dg-cell&gt;BBB&lt;/clr-dg-cell&gt;
          &lt;clr-dg-cell&gt;222&lt;/clr-dg-cell&gt;
        &lt;/clr-dg-row-detail&gt;
      &lt;/ng-container&gt;
    &lt;/clr-dg-row&gt;
    &lt;clr-dg-row&gt;
      &lt;clr-dg-cell&gt;CCC&lt;/clr-dg-cell&gt;
      &lt;clr-dg-cell&gt;333&lt;/clr-dg-cell&gt;
    &lt;/clr-dg-row&gt;
  &lt;/clr-datagrid&gt;
  </code></pre>
  
  <p>I was expecting to see something like the following:</p>
  
  <p><a href="https://i.stack.imgur.com/KFQ5V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KFQ5V.png" alt="enter image description here"></a></p>
  
  <p>Unfortunately this is the result that I am getting:</p>
  
  <p><a href="https://i.stack.imgur.com/QDpkK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QDpkK.png" alt="enter image description here"></a></p>
  
  <p>This issue happen when I wrap the <em>clr-dg-row-detail</em> with any element (e.g. <em>div</em>, <em>ng-container</em> etc). I need a wrap element to put a conditional expression because not every row has detail info.</p>
  
  <p>Does anyone has a suggestion to do that?</p>