Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Ted Herrlich
180
Is it possible to filter an igx actionstrip menu based on a field value from a grid row?
posted

I have a grid with records that all contain a status. On the grid I have an actionstrip with two current entries, Submit and Delete:

<igx-action-strip #actionstrip [context]="batchListGrid.data">
              <ng-container>
                <div *igxActionStripMenuItem class="menu-button" (click)="setCurrentBatch(actionstrip.context, 'submit')" igxRipple>
                  <igx-icon>outbox</igx-icon>
                  <span>Submit</span>
                </div>
                <div *igxActionStripMenuItem class="menu-button" (click)="setCurrentBatch(actionstrip.context, 'delete')" igxRipple>
                  <igx-icon>delete</igx-icon>
                  <span>Delete</span>
                </div>
              </ng-container>
            </igx-action-strip>


What I would like to do is only display the menu items that meet a certain status. *ngIf is not allowed because only one structural directive is allowed. I tried using a standard drop down, but the record field isn't available in the action strip -- hopefully i am missing something simple. Anyone can help me with what I hope is a "duh" moment?
  • 2680
    Offline posted

    Hi Ted,

    The most straightforward approach would be to leverage an ng-container element to combine multiple structural directives. More about this can be found in this section of the official Angular documentation. 

    For example:

     <igx-action-strip #actionstrip>
      <igx-grid-pinning-actions></igx-grid-pinning-actions>
      <ng-container *ngIf="!inEditMode(actionstrip.context)">
        <ng-container *ngIf="actionstrip?.context?.data.UnitPrice > 20">
          <div
            *igxActionStripMenuItem
            class="menu-button"
            (click)="setCurrentBatch(actionstrip.context, 'submit')"
            igxRipple
          >
            <igx-icon>outbox</igx-icon>
            <span>Submit</span>
          </div>
        </ng-container>
    </igx-action-strip>

    Here is also a quick example with the IgxGrid, that shows an IgxActionStripMenuItem only for records having their UnitPrice value greater than 20.

    Please, check out the referenced resources and let me know if you have any questions on the matter.

    Best regards,
    Bozhidara Pachilova
    Associate Software Developer