[SOLVED] Adding new row to igx grid using igx-action-strip

Adding new row to igx grid using igx-action-strip

I am trying to create a igx grid table with an edit-button, similar to this example provided by Infragistics Angular Grid Row Adding Example

<igx-action-strip #actionstrip>
    <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
</igx-action-strip>

I added IgxActionStripModule to the app.modules.ts and addRow is not found. Should I add some other modules or why this simple example does not work? I did not find no tutorials or explanations about it. I have Angular version 12 and Visual Studio 2019.

Solution

Ensure the following:

the other two dependency modules are present as well. You should see IgxActionStripModule, IgxInputGroupModule and IgxFocusModule.
check that the modules persist in the @NgModule imports as well.
Set rowEditable grid input to true, and add action strip as content projection in the grid:

<igx-action-strip #actionstrip> <igx-grid-editing-actions [addRow]="true">
Setting primary key is mandatory for row adding operations.

Now upon row hover you should see the row action icons for row adding, editing and delete