Modify data in a table using Dialog Component in Angular Material

I need to implement a Material Dialog feature that allows users to update entries in a table by clicking on the "Change Status" button.

Check out this functional snippet:

https://stackblitz.com/edit/angular-alu8pa

I have successfully retrieved data from the dialog, as shown in the console log of the snippet. However, I am facing challenges updating the table entry with this data, specifically for the Reason and StatusDescription fields.

Below is the code snippet for my Dialog component:


// Code for EditingDialogComponent goes here

The save() method helps retrieve data from the dialog, and I am subscribing in the payments component.

Here is the relevant code for the PaymentsComponent:


// Code for PaymentsComponent goes here

I am looking for guidance on how to correctly update a row in the table with new data. Any insights on this are greatly appreciated.

javascriptangulartypescriptangular-material

Answer №1

To achieve this task, you can take the following steps.

Send the main element payment as a parameter to the function openDialog(), you can simplify your openDialog() by only requiring this one argument if desired.

<button mat-button (click)="openDialog(payment.Id, payment.Currency, payment.Amount, payment.Reason,payment.StatusDescription, payment)">Change Status</button>

include payment as an extra argument

openDialog(Id, Currency, Amount, Reason, StatusDescription, payment) {

then update the values within your subscription for afterClose()

 dialogRef.afterClosed().subscribe(
      data => {
        console.log("Dialog output:", data)
        payment.Reason = data.reason;
        payment.StatusDescription = data.status
      }
    );

Stackblitz

https://stackblitz.com/edit/angular-wfvqbj?embed=1&file=src/app/payments/payments.component.html

By passing individual arguments like payment.Id, they become local variables to the function and disconnect from the original root record. Reassigning values does not impact the caller... sending the entire root element circumvents this issue and allows modifications to reflect in the view as the root element is now within the function's scope.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message: "Issue encountered with locating Node import module while operating within a docker

I've created a React app along with a Node.js server that includes the following imports: import express from 'express' import compression from 'compression' import cookieParser from 'cookie-parser' import bodyParser from ...

javascriptnode.jsreactjsexpressnpm

I am retrieving data from a service and passing it to a component using Angular and receiving '[object Object]'

Searching for assistance with the problem below regarding my model class. I've attempted various approaches using the .pipe.map() and importing {map} from rxjs/operators, but still encountering the error message [object Object] export class AppProfile ...

javascriptangulartypescript

Why is the mappable Observable lost after using Angular 5's HttpClient?

Why is Angular 5 httpclient causing me to lose the observable after mapping? Am I overlooking something crucial in my code? The following is my code snippet: getRepos(org:string):Observable<any>{ let params = new HttpParams().set('org&ap ...

angularobservable

Error encountered in 11ty: Invalid operation - eleventyConfig.addPassthroughCopy is not a recognized function

Attempting to integrate my CSS and JavaScript codes into 11ty has been a bit challenging for me. I recently discovered that 11ty utilizes something called .11ty.js, so I decided to utilize the addPassthroughCopy() function. Below is the script I tried: mo ...

javascripterror-handlingeleventy

Unable to establish a connection with ngModel despite the FormsModule module being successfully imported

I'm currently following the tutorial Tour of Heroes and I've reached a point where I need to add my first input field. Even though I have included FormsModule in AppModule, I keep getting an error saying "ng Can't bind to '{ngModel}&apo ...

angularangular5

Encountering a challenge with Nuxt where I am unable to navigate back when utilizing the require method

After successfully viewing the image, I encountered an error when trying to navigate back using <NuxtLink :to="{ path: 'About', hash: '#secondNav' }" class="close">, which resulted in a message stating Cannot f ...

javascriptvue.jsnuxt.js

Implementing auto-population of input field in Vue JS based on dropdown selection

I'm in search of a solution for automatically filling input fields in Vue.js. My form consists of various input types such as text, select dropdowns, and quantities. I want the vCPU, vRAM, and Storage Capacity fields to be filled with predefined value ...

javascriptvue.jsvuejs3

Having trouble resolving '@auth0/nextjs-auth0' during deployment on Vercel? Check out this error message: "Can't resolve '@auth0/nextjs-auth0' in '/vercel/path0/pages'"

I recently deployed a project on Vercel and have been working on enhancing the layout to achieve a minimum viable product (MVP). As part of this process, I decided to switch my authentication method to @auth0/nextjs-auth0 package for Next.js. After running ...

javascriptnode.jsnext.jsnode-modulesauth0

State in Angular stubbornly refuses to switch despite condition changes

Here is the Typescript code, followed by the HTML: public verifySelection() { let choice = false; if (typeof this.formUser.permissionsTemplateID === undefined) { choice = true; } return choice; } <div class="form-group" ...

htmlangulartypescript

Adaptive Website displayed within an iframe

Currently, I have a responsive website that can be viewed here. The main objective is to embed this site into an iframe while maintaining its responsiveness. I attempted embedding my site in JSFiddle for testing purposes, which you can see here. However ...

javascripthtmlcsstwitter-bootstrapresponsive-design

Is it possible to retrieve and utilize multiple Enum values in Typescript?

Combine enum values to retrieve corresponding enum strings. Consider the following scenario: enum EnumDays { NONE = 0, SUN = 1, MON = 2, TUE = 4, WED = 8, THU = 16, FRI = 32, SAT = 64, ALL = 127 } If I pass a value o ...

typescriptenumsenum-flags

Error: Unable to load the parser '@typescript-eslint/parser' as specified in the configuration file '.eslintrc.json' for eslint-config-next/core-web-vitals

When starting a new Next.js application with the specific configuration below: ✔ What name do you want to give your project? … app ✔ Do you want to use TypeScript? … No / [Yes] ✔ Do you want to use ESLint? … No / [Yes] ✔ Do you want to use T ...

typescriptnext.jseslintprettiereslintrc

Reversing the Jquery checkbox functionality

Seeking some quick assistance here. I'm puzzled as to why this function seems to be working in reverse. Whenever I try to check the checkboxes, they all get unchecked and vice versa. Everything was functioning smoothly until I introduced the .click() ...

javascriptjquerycheckbox

Send the cookie with the JSON request

While logged into a secure website with a login, I came across some valuable data that is transmitted through the server in JSON format. By opening Chrome and inspecting the page using the "Network" tab, I discovered a URL utilizing XHR which contained the ...

javascriptjsoncookies

"Organizing Data with Angular 2's Sorting Pipe for Arrays of

Guide to Creating a Sorting Pipe in Angular 2 Using an Array of Objects Initial Challenge: I am working with a TODOs list (Todo[ ]), and I need to sort it every time modifications are made. The desired outcome is to have completed todos appear at the bot ...

sortingpipeangular

Challenges in Angular 2

After building an application using Angular 2 with Lite Server, I noticed that it initially runs smoothly and quickly. However, over time, the performance starts to degrade and my application becomes sluggish. To address this issue, I typically restart L ...

angularnpmlite-server

Utilizing promise values within asynchronous functions

I know this question has been asked multiple times, but I'm facing a situation where I need to retrieve a variable created within a promise. The examples I've come across involve using .then to access the data, but in my case, I need to work with ...

javascriptnode.jspromiseasync-await

Implement styling based on user input - Transmit form data via PHP to designated email address

My form allows people to provide their details and share their current timetable. I then group them based on suitable times The PHP form currently prints either 'work' or 'free' into a table cell, based on user selection in the form, a ...

javascriptphphtmlformsemail

Managing ajax requests for lazy loading while scrolling through the middle of the window can be a challenging task. Here are some tips on

I have implemented Lazy loading in my Project. I found a reference at which explains how to make an ajax call after scrolling and image upload with slow mode without allowing scrolling until the loader is shown. The code snippet I am using is as follows: ...

javascriptjqueryhtmlajaxasp.net-mvc

Having trouble configuring bcryptjs in a React.js project

I have been working on setting up a single registration page within a react component. However, I encountered an issue when trying to hash the password before sending the response to my back-end. I am puzzled as to why the code snippet below is not functi ...

javascriptreactjsbcrypt