Editing table data in Angular 4

Question

I am simply trying to display, add, delete & update the employee table in Angular. Here is the image of the table:

As of now I have disabled each field of the table. Whenever i click on 'Edit' button i want the field of the corresponding row to be enabled so i can edit right on!

Here are my files:

employee-data.component.ts

import { Component } from '@angular/core';
import { Employee } from './employee';
import { NgForm } from '@angular/forms';
import { promise } from 'selenium-webdriver';


@Component({
selector: 'employee-data',
templateUrl: './employee-data.component.html',
})

export class EmployeeDataComponent {

id: number;
name: string;
address: string;
gender: string;
company: string;

//emp: Employee[] = [];

employees: Employee[] = [
    {
        id: 1,
        name: 'Ram',
        address: 'Kupondole',
        gender: 'Male',
        company: 'XYZ Techno Sales'
    },
    {
        id: 2,
        name: 'Shyam',
        address: 'Baneshwor',
        gender: 'Male',
        company: 'ABC Enterprises'
    },
    {
        id: 3,
        name: 'Prashansha',
        address: 'Tripureshwor',
        gender: 'Female',
        company: 'MNO Inc'
    },
    {
        id: 4,
        name: 'Rita',
        address: 'Ghatthaghar',
        gender: 'Female',
        company: 'Subisu'
    }
];

addRow() {
    //prompt("Checking the control!");
    this.employees.push({
        id: this.id,
        name: this.name,
        address: this.address,
        gender: this.gender,
        company: this.company
    });
}

deleteEmployee(index) {

    this.employees.splice(index, 1);
}

editEmployee(index) {

    //code for editing

}

}

employee-data.component.html

<table border="1">
<thead>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Address</td>
        <td>Gender</td>
        <td>Company</td>
        <td>Action</td>
    </tr>
</thead>

<tbody>
    <tr *ngFor="let employee of employees; let i= index;">
        <td>
            <input type="number" min="1" [(ngModel)]="employee.id" disabled>
        </td>
        <td>
            <input type="text" [(ngModel)]="employee.name" disabled>
        </td>
        <td>
            <input type="text" [(ngModel)]="employee.address" disabled>
        </td>
        <td>
            <input type="text" [(ngModel)]="employee.gender" disabled>
        </td>
        <td>
            <input type="text" [(ngModel)]="employee.company" disabled>
        </td>
        <td>
            <div>
                <button (click)="editEmployee(i)">Edit</button>
                <button (click)="deleteEmployee(i)">Delete</button>
            </div>
        </td>
    </tr>
</tbody>
</table>
<hr>
<br>
<h1>Add an Employee</h1>

<form>
<div>
    <label>Id</label>
    <div>
        <input type="number" class="" name="id"
        [(ngModel)]="id" required />
    </div>
</div>

<div>
    <label>Name</label>
    <div>
        <input type="text" class="" name="name"
        [(ngModel)]="name" required />
    </div>
</div>
<div>
    <label>Address</label>
    <div>
        <input type="text" class="" name="address"
        [(ngModel)]="address" required />
    </div>
</div>
<div>
    <label>Gender</label>
    <div>
        <input type="text" class="" name="gender"
        [(ngModel)]="gender" required />
    </div>
</div>
<div>
    <label>Company</label>
    <div>
        <input type="text" class="" name="company"
        [(ngModel)]="company" required />
    </div>
</div>
<div>                               
    <div>
        <input type="submit" value="Submit" class=""
           (click)="addRow()" />
    </div>
</div>
</form>

How can i edit the row? And I am using Angular 4

Not sure if this will be of any help after so many years, but I would suggest having a separate form for the edit and add because that will reduce the complexity. Also, I find inline edit risky as there can be numerous alternate scenarios you need to handle if the user starts triggering multiple row updates and the design would start wobbling due to the inline fields. I have designed a table that will focus on one row at a time using a drawer. I have made a guide for the same. [You can find it here](https://owrrpon.medium.com/editable-an-editable-table-using-angular-material-7a4c4210bb71) Edit — Owrrpon, Aug 10 '21 at 09:51

jitender · Accepted Answer · 2019-01-17T10:01:50.293

14

You can use a property like isEditable with employee and use it to disable or enable editing something like

<input type="text" [(ngModel)]="employee.name"  [disabled]="!employee.isEditable">

Then enable on edit button click

<button (click)="employee.isEditable=!employee.isEditable" *ngIf="!employee.isEditable">Edit</button>

Check this demo

edited Jan 17 '19 at 10:01

answered Dec 08 '17 at 11:08

jitender

10,238
1
18
44

Hi @jitender pls help on this [link]https://stackoverflow.com/q/59468510/12590864 – Dec 25 '19 at 15:52

Editing table data in Angular 4

1 Answers1