I am making a CRUD method using angular material table and dialog, I don't understand how to make the update method using the dialog how to pass the data from one component to another.
My modify line doesn't update how to do it and what's wrong with my code ?
thanks.
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);
});
}
}
I believe you should not perform the update, or the creation of the item inside the dialog component. That should not be concerned with such a responsibility, otherwise it will get harder for you to maintain it. It should only allow the user to make changes to the entity and that's it. Whenever you close the modal, you can subscribe to the afterClosed event and decide there what you should do with the entity. Usually, if the entity has an id, it means that you need to update an existing entry, otherwise create a new one.
The dialog component should also inject the dialogRef, so that you can close the dialog and also provide a result:
export class EditDialogComponent {
constructor(
@Inject(MAT_DIALOG_DATA) public data: MatDialog,
private tableService: TableService,
private dialogRef: MatDialogRef<EditDialogComponent>
) {}
public element: any = this.data;
edit(value: any) {
this.dialogRef.close(this.element);
}
}
In the component that renders the table, you should open the modal like you already do:
openDialog(element: any) {
const dialogRef = this.dialog.open(EditTableDialogComponent, {
data: element,
});
dialogRef
.afterClosed()
.pipe(
filter((element) => !!element), // in case the user closes the modal without pressing the "Modifier" button
switchMap(
(element) => iif(() => element.id),
this.tableService.update(element.id, element),
this.tableService.create(element)
)
)
.subscribe((data) => {
console.log('success', data);
});
}
And also decide what to do with the item (create or update).
In you component try use Formbuilder and input.getValue()
<div [formGroup]="formInput" class="inputAdd">
<h2>Edit Table</h2>
<input #input value="{{element.name}}" formControlName="myInput">
<button (click)="edit(input.value)">Modifier</button>
</div>
in TS
constructor(private formBuilder: FormBuilder) { }
createForm() {
this.formInput = this.formBuilder.group({
myInput: [cliente.nome],
})
}
edit(value: any) {
sendValue = this.createForm.myInput.getValue;
this.tableService.update(this.element.id, sandValue).subscribe((data:any) => {
console.log(data);
});
}