Row Actions in Angular Data Grid

    The grid component in Ignite UI for Angular provides the ability to use ActionStrip and utilize CRUD for row/cell components and row pinning. The Action Strip component can host predefined UI controls for these operations.

    Usage

    The first step is to import the IgxActionStripModule in our app.module.ts file:

    // app.module.ts

...
import { IgxActionStripModule } from 'igniteui-angular';
// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxActionStripModule],
    ...
})

    The predefined actions UI components are:

    • IgxGridEditingActionsComponent - includes functionality and UI specifically designed for the grid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the rowEditable option and row deletion of the grid.

    • IgxGridPinningActionsComponent - includes functionality and UI specifically designed for the grid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts.

    They are added inside the <igx-action-strip> and this is all needed to have an Action Strip providing default interactions.

    <igx-grid [data]="data" [rowEditable]="true" [primaryKey]="'ID'">
    <igx-column *ngFor="let c of columns" [field]="c.field">
    </igx-column>

    <igx-action-strip #actionStrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <igx-grid-editing-actions></igx-grid-editing-actions>
    </igx-action-strip>
</igx-grid>
    Note

    When IgxActionStripComponent is a child component of the grid, hovering a row will automatically show the UI.

    Custom implementation

    These components expose templates giving flexibility for customization. For instance, if we would like to use the ActionStrip for a Gmail scenario with row actions such as delete, edit and etc. You can simply create button component with igx-icon, add click event to it and insert it into the igx-action-strip component.

    <igx-grid>
    <igx-action-strip #actionstrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <button title="Edit" igxIconButton="flat" igxRipple (click)='startEdit(actionstrip.context)'>
            <igx-icon>edit</igx-icon>
        </button>
        <button title="Delete" igxIconButton="flat" igxRipple *ngIf='!isDeleted(actionstrip.context)' (click)='actionstrip.context.delete()'>
            <igx-icon>delete</igx-icon>
        </button>
    </igx-action-strip>
</igx-grid>

    Note

    The predefined actions inherit IgxGridActionsBaseDirective and when creating a custom grid action component, it should also inherit IgxGridActionsBaseDirective.

    API References

    For more detailed information regarding the Action Strip API, refer to the following links:

    Additional components and/or directives that can be used within the Action Strip: