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

Solution

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