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...
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/fd9ccfa2-98ea-4d50-826c-067b68e3151d%40googlegroups.com.
