Currently, I am struggling with implementing a CRUD method using angular material table and dialog components. I am facing difficulties in understanding how to update records using the dialog and pass data between components.
Despite my efforts, the modify line is not updating as expected. Can anyone shed some light on what might be wrong with my code?
Thank you!
service
getTableDetails(): Observable<any[]> {
return this.http.get<any[]>(this.url);
}
create(name: any): Observable<any> {
return this.http.post<any>(this.url, name);
}
update(id: any, data: any): Observable<any> {
return this.http.put<any>(this.url + '/' + id, data);
}
delete(id: any): Observable<number> {
return this.http.delete<any>(this.url + '/' + id);
}
ts.file
openDialog(element: any) {
const dialogRef = this.dialog.open(EditTableDialogComponent, {
data: element,
});
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
});
}
dialog.html
<div class="inputAdd">
<h2>Edit Table</h2>
<input #input value="{{element.name}}" required>
<button (click)="edit(input.value)">Modifier</button>
</div>
dialog.ts
export class EditDialogComponent {
constructor(
@Inject(MAT_DIALOG_DATA) public data: MatDialog,
private tableService: TableService
) {}
public element: any = this.data;
edit(value: any) {
this.tableService.update(this.element.id, value).subscribe((data:any) => {
console.log(data);
});
}
}