Html inline editing in angular

[Baiju Krishnan]

Hi All,

I have an Angular 8 Crud application  and having database access with Web Api.

following is the angular Html

project.component.html

<table class="table">
      <thead>
        <th>Project ID</th>
        <th>Project Name</th>
        <th>Date of Start</th>
        <th>Team Size</th>
        <th>Actions</th>
      </thead>
      <tbody>
        <tr *ngFor="let project of projects; let i = index">
          <td>{{project.projectID}}</td>
          <td>{{project.projectName}}  </td>          
          <td>{{project.dateOfStart}}</td>
          <td>{{project.teamSize}}</td>
          <td>
            <button class="btn btn-info" (click)="onEditClick($event, i)" data-toggle="modal"
              data-target="#editModal">Edit</button>|
            <button class="btn btn-warning" (click)="onDeleteClick($event, i)" data-toggle="modal"
              data-target="#deleteModal">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>

Enter code here...

and  the code for project.compoment.ts is

Enter

import { Component, OnInit } from "@angular/core";
import { ProjectsService } from "../../projects.service";
import { Project } from "src/app/project";

@Component({
  selector: "app-projects",
  templateUrl: "./projects.component.html",
  styleUrls: ["./projects.component.scss"]
})
export class ProjectsComponent implements OnInit {
  projects: Project[] = [];
  newProject: Project = new Project();
  editProject: Project = new Project();
  editIndex: number = null;  

  constructor(private projectsService: ProjectsService) {
  }

  ngOnInit() {
    this.projectsService.getAllProjects().subscribe(
      (response: Project[]) => {
        this.projects = response;
      }
    );
  }

  onSaveClick() {
    this.projectsService.insertProject(this.newProject).subscribe((response) => {
      // Add Project to Grid
      const p: Project = new Project();
      p.projectID = response.projectID;
      p.projectName = response.projectName;
      p.dateOfStart = response.dateOfStart;
      p.teamSize = response.teamSize;
      this.projects.push(p);

      // Clear New Project Dialog - TextBoxes
      this.newProject.projectID = null;
      this.newProject.projectName = null;
      this.newProject.dateOfStart = null;
      this.newProject.teamSize = null;
    }, (error) => {
      console.log(error);
    });
  }

  onEditClick(event, index: number) {
    this.editProject.projectID = this.projects[index].projectID;
    this.editProject.projectName = this.projects[index].projectName;
    this.editProject.dateOfStart = this.projects[index].dateOfStart;
    this.editProject.teamSize = this.projects[index].teamSize;
    this.editIndex = index;
  }

  onUpdateClick() {
    this.projectsService.updateProject(this.editProject).subscribe((response: Project) => {
      const p: Project = new Project();
      p.projectID = response.projectID;
      p.projectName = response.projectName;
      p.dateOfStart = response.dateOfStart;
      p.teamSize = response.teamSize;
      this.projects[this.editIndex] = p;

      this.editProject.projectID = null;
      this.editProject.projectName = null;
      this.editProject.dateOfStart = null;
      this.editProject.teamSize = null;
    },
      (error) => {
        console.log(error);
      });
  }

this is working fine.

for editing , if we press edit button ,a dialog box will open and
values will be displayed in that text boxes. and there is save button in
 dialog box and working fine

my requirement is

for  editing I need inline editing

if i press the edit button in a particular row ,the row should
display data in text boxes.initially this text boxes should be hide..

value of edit button should change in to update.there should be a cancel button also.

like this

<td>{{project.projectID}} </td>
<td>{{project.projectName}} <input
type="text"> {{project.projectName}} </> </td>
<td>{{project.dateOfStart}} <input
type="text"> {{project.dateofStart}} </></td>
<td>{{project.teamSize}} <input
type="text"> {{project.teamSize}}
 </></td>

in the above code <input type="text" should be hide initially
,when we click edit button the text box should be visible with value and
 the other value should hide.

how to do this in angular 8.

Regards

Baiju

  

  

  
}

code here...