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

Question

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.

Answer 1

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