CODEWITHSUNDEEP
javascriptangular
Bhrungarajni
Bhrungarajni

Reputation: 2545

How to edit particular row inline edit using Angular8

Hi I am using Angular8 and initially, it must be bound in a table all values and when click on edit, that particular row should be editable and one row at a time can be edited, I have attached the demo. And here I have added only one array data for demo purposes, but I need to bind multiple years so I tried with reactive forms to add input field and td based on click but couldn't bind values. So here in my case, I need to edit one row at a time.

HTML:

<ng-container *ngFor="let contact of yearManagement">
      <tr>
        <td></td>
        <td class="text-capitalize">{{contact.policyTypeName}}</td>
        <td>{{contact.quotes}}</td>
        <td>{{contact.policyCT}}</td>
        <td>{{contact.writtenPremium }}</td>
        <td class="width125">
          <button class="btn btn-outline-primary btn-table ml-1" title="Edit">Edit</button>
          <button class="btn btn-outline-primary btn-table ml-1" title="Delete"
                      (click)="deleteCommitment(contact)">Delete</button>
        </td>
      </tr>
    </ng-container>

Demo

Upvotes: 0

Views: 686

Answers (1)

Ammar Hussain
Ammar Hussain

Reputation: 304

Try with the following changes in html

<ng-container *ngFor="let contact of yearManagement">
      <tr>
        <td></td>
        <td class="text-capitalize">
          <ng-container *ngIf="editableRow !== contact.id; else newDeb">
            {{contact.policyTypeName}}
          </ng-container>
          <ng-template #newDeb>
            <input [(ngModel)]="contact.policyTypeName" />
          </ng-template>
        </td>
        <td>{{contact.quotes}}</td>
        <td>{{contact.policyCT}}</td>
        <td>{{contact.writtenPremium }}</td>
        <td class="width125">
          <button class="btn btn-outline-primary btn-table ml-1" title="Edit"
          (click)="editableRow = contact.id">Edit</button>
          <button class="btn btn-outline-primary btn-table ml-1" title="Delete"
                      (click)="deleteCommitment(contact)">Delete</button>
        </td>
      </tr>
    </ng-container>

And in typescript

export class AppComponent {
  editableRow = 0;

Upvotes: 1

Related Questions