Igx grid cell with button inside

Question

I am working on an Angular project with Ignite UI. I have a igx grid and "edit"-buttons in each cell from the igx grid.

When I edit one of these cells and press the Enter key then the changed cell values are shown like this:

And not in italic like this one:

Here is my igx grid.

    <igx-grid igxPreventDocumentScroll
              #grid1
              [batchEditing]="true"
              [data]="posts"
              [primaryKey]="'myId'"
              [rowHeight]="40">
    
      <igx-column field="monat" dataType="string" header="Monat" [editable]="true" [movable]="true">
    
         <ng-template igxCell let-cell="cell">

           <span>{{ cell.value }}</span>

              <button igxButton="icon 
              (click)="editSelectedData(cell.id.rowID,cell.column.field, 
              cell.value)" >
                   <igx-icon>edit</igx-icon>
              </button>

        </ng-template>
      </igx-column>
    </igx-grid>

How can I add a button inside a cell of igx grid, so that the changed data will be marked in italic like in the third screenshot?

I think that the <span>-element is not the right one, if yes, which HTML-element should I use? Thanks.

Answer 1

The reason to see different font-style is because of the custom template that you are using. The default styling of edited value (a change that is not yet comitted to the database) is with font-style:italic, which does not apply to custom templates. Batch editing topic and Transaction service topic.

You will have to set a custom style to your template or in that case, span or div element, whatever you decide to choose:

<igx-grid #grid [batchEditing]="true" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
...
  <igx-column field="UnitPrice" header="Unit Price" [dataType]="'string'"></igx-column>
  <igx-column field="UnitsOnOrder" header="Units On Order" dataType="number">
            <ng-template igxCell let-cell="cell">
                <div class="test">{{ cell.value }}</div>
                   <button igxButton="icon">
                        <igx-icon>edit</igx-icon>
                   </button>
             </ng-template>
        </igx-column>

:host ::ng-deep {
    .igx-grid__td--edited > div {
        font-style: italic;
    }
}

Note: If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep