How to display changed values in row

Question

I have selected the row value from datagrid and using selection I'm showing the Edit button. When I click edit, the selected row details will display in the modal. In Edit userModa;, I want to modify the user value and show it in the datagrid.

This is my user edit modal enter image description here

my app.component.html

<clr-datagrid [clrDgLoading]="displayProgressSpinner" [(clrDgSingleSelected)]="selected" [clrDgRowSelection]="true">
  <clr-dg-action-bar *ngIf="selected">
    <button class="btn btn-warning" (click)="openEditDialogModal()">Edit</button>
    <clr-modal [(clrModalOpen)]="openEditModal" clrLableSize="4">
      <h2 class="modal-title">User Edit</h2>
      <div class="modal-body">
        <div *ngFor="let userreport of selected | keyvalue">
          <form class="clr-form clr-form-compact">
            <clr-input-container>
              <label class="clr-control-label required">{{userreport.key}}</label>
              <input clrInput type="text" name="name" required [(ngModel)]="userreport.value" />
            </clr-input-container>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-danger" (click)=" openEditModal=false">Close</button> &nbsp;
          <button class="btn btn-primary" (click)=" EditUser(selected)">Submit</button>
        </div>
      </div>
    </clr-modal>
  </clr-dg-action-bar>

  <clr-dg-column [style.width.p]="20">ID</clr-dg-column>
  <clr-dg-column>Name</clr-dg-column>
  <clr-dg-column>Email</clr-dg-column>
  <clr-dg-column [clrDgField]="'gender'">Gender</clr-dg-column>
  <clr-dg-column [clrDgField]="'status'">Status</clr-dg-column>

  <clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user">
    <clr-dg-cell>{{user.id}}</clr-dg-cell>
    <clr-dg-cell>{{user.name}}</clr-dg-cell>
    <clr-dg-cell>{{user.email}}</clr-dg-cell>
    <clr-dg-cell>{{user.gender}}</clr-dg-cell>
    <clr-dg-cell>{{user.status}}</clr-dg-cell>
  </clr-dg-row>

</clr-datagrid>