2

Can I control the opening of a detail from my function?

Is it possible to pass to the "clr-dg-row-detail" the EventEmitter so that I can emit in the component event about the opening of the detail.

<clr-datagrid>
  <clr-dg-column>Artifact</clr-dg-column>
  <clr-dg-column>Category</clr-dg-column>
  <clr-dg-column>Action</clr-dg-column>

  <clr-dg-row>
    <clr-dg-cell>AAA</clr-dg-cell>
    <clr-dg-cell>111</clr-dg-cell>
    <clr-dg-cell>
      <button (click)="myFunctionFromOpenDetail()">
        MY BUTTON!
      </button>
    </clr-dg-cell>
    <ng-container ngProjectAs="clr-dg-row-detail" *ngIf="true">
      <clr-dg-row-detail *clrIfExpanded ?????????? >
        Lorem ipsum...
      </clr-dg-row-detail>
    </ng-container>
  </clr-dg-row>
</clr-datagrid>
vasaeps3
  • 31
  • 5

2 Answers2

1

I'm not sure what you mean by "passing the EventEmitter", that's not a pattern I understand with Angular. But the clrIfExpanded directive does provide two-way binding on the expanded state of the details, so that looks like what you're looking for.

If you only need to force some details open, you can do this: 

<clr-dg-row-detail *clrIfExpanded="true">...</clr-dg-row-detail>

Or replace true by whatever variable determines if a row is expanded.

If you need complete two-way binding to dynamically expand and close the rows, however, you'll need to use the de-sugarized syntax since Angular doesn't provide a way to use two-way binding with the * star short syntax:

<ng-template [(clrIfExpanded)]="yourRow.expanded">
    <clr-dg-row-detail>...</clr-dg-row-detail>
</ng-template>
Eudes
  • 1,521
  • 9
  • 17
1

in later clarity builds (2.x) you will need this for two way bindings, otherwise the chevron will rotate but content will not show with ng-template example:

<clr-dg-row-detail [(clrIfExpanded)]="yourRow.expanded">...</clr-dg-row-detail>
Alain Dumesny
  • 162
  • 1
  • 4