How to edit particular row inline edit using Angular8

Question

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

stackblitz.com/edit/… I have updated the code. Does this solve your problem? — Ammar Hussain
– Ammar Hussain, Commented Jul 29, 2021 at 6:06
Thanks for response, ya to some extent this is solving my problem, i may need your help even more — Bhrungarajni
– Bhrungarajni, Commented Jul 29, 2021 at 6:21
@AmmarHussain if i click on close i have to revert values newly entered, but currently it is taking same updated value — Bhrungarajni
– Bhrungarajni, Commented Jul 29, 2021 at 13:03

Ammar Hussain · Accepted Answer · 2021-07-29 06:26:11Z

1

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;

answered Jul 29, 2021 at 6:26

Ammar Hussain

3042 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bhrungarajni Over a year ago

Thanks for the answer, i have added few buttons, when clicked on edit, edit should be hidden and show save and close button, when cliked on close, it must be back to binding from input box, stackblitz.com/edit/… via editrow can that be handled?

Ammar Hussain Over a year ago

stackblitz.com/edit/…

Ammar Hussain Over a year ago

Have a look now.

Bhrungarajni Over a year ago

how can we check, when clicking on close, does that row has got some edit or not?

Collectives™ on Stack Overflow

How to edit particular row inline edit using Angular8

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related