Search code examples
angularvmware-clarity

Using clrLoading for a list of buttons

I am using a VMWare Clarity datagrid where one column has a button. I would like that when I click on a button, that one has the spinner, but not the other ones. How could I manage to isolate that behavior?

  <clr-datagrid [clDgRowSelection]="true" [(clrDgSingleSelected)]="itemSelected">

    <clr-dg-column>Title</clr-dg-column>
    <clr-dg-column>&nbsp;</clr-dg-column>

    <clr-dg-row *clrDgItems="let item of items; trackBy: trackById" [clrDgItem]="item">
      <clr-dg-cell>{{ item.name }}</clr-dg-cell>
      <clr-dg-cell>
        <button [clrLoading]="resetState" type="button" class="btn btn-sm" (click)="resetItem(item)"</clr-dg-cell>
    </clr-dg-row>

  </clr-datagrid>

Thanks

Solution

  • All you need to do is to make you you have a "loading" state for each item. It could be that item.resetState is true while it's reseting, or you could turn your resetState into a map rather than a simple boolean.

    For instance, the second solution I mentioned would look like:

    <button [clrLoading]="resetState[item.id]" (click)="resetItem(item)">

    where resetItem(item) does the reset and sets resetState[item.id] = true while waiting for it to finish.