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

Conceal form after submission - Django 1.6

I'm currently working on a Django 1.6 project where I have this form: <form action="/proyecto/" method="POST" id="myform"> {% csrf_token %} <table> <span class="Separador_Modulo">& ...

javascriptjqueryhtmldjango

Is it possible to perform remote file upload using Selenium in TypeScript?

Is there a specific way to manage remote file uploads using selenium-webdriver in typescript? Here is code that functions in javascript for this purpose: import remote from 'selenium-webdriver/remote'; // import * as remote from 'selenium- ...

typescriptselenium-webdriverprotractor

Embedding content within various ng-template elements

I'm currently working on developing a button component (app-button) that can utilize multiple templates based on the parent component using it. <div class="ds-u-margin-left--1 ds-u-float--left"> <ng-container *ngTemplateOutlet="icon">< ...

htmlangular

Understanding the attribute types in Typescript React

While working on code using Typescript + React, I encountered an error. Whenever I try to set type/value in the attribute of <a> tag, I receive a compile error. <a value='Hello' type='button'>Search</a> This piece o ...

reactjstypescripttsx

Why do certain URLs bypass the filters despite not meeting the criteria in the Chrome extension?

I am currently developing a Chrome extension that is designed to automatically close tabs when specific URLs are visited, helping me stay focused and avoid distractions. The list of sites that should trigger tab closures includes: YouTube Facebook Reddit ...

javascriptgoogle-chromeurlbrowsergoogle-chrome-extension

Using styled-components and typescript to override props

Currently, I am faced with the challenge of using a component that necessitates a specific property to be set. My goal is to style this component with the required property already defined, without having to manually specify it again during rendering. Howe ...

reactjstypescriptstyled-components

The Battle of node.js Modules: Comparing socket.io and express.static

The server.js file I am currently running is set up as follows: module.exports = server; var express = require('express'); var fs = require('fs'); var server = express.createServer(); var port = 58000; server.listen(port); var ...

javascriptnode.jsexpresssocket.io

Error Encountered When Running JavaScript Code

Running the code on my Localhost:3000 is resulting in an error message: Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'id') The specific section of the code causing this error is highlighted in the Source part: ...

javascriptreactjsnext.jsundefinedtypeerror

The modal functionality in AngularJS doesn't seem to be functioning properly

I am currently working on an Angular application where I want to implement a button that, when clicked, will open a pop-up window displaying a chart. Below is the button code: <div style="padding-top:50px;padding-left:10px;"> <button type="butto ...

angularbootstrap-modal

Guide on redirecting to a new domain using a cookie in Express.js

I am working on a web app using Express on Node and I want to add a proxy login feature that allows users to be automatically logged in and redirected to another site after logging into my site. Within my routing function, I have the following code: res ...

javascriptnode.jsexpress

The issue with the ng-click property not triggering arises when it is assigned to a button that is generated dynamically

I need to construct a table dynamically based on the results returned from SQL. In this scenario, populating the table with the start time, end time, and user is straightforward: var StartTime = document.createElement('td'); var EndTime = docume ...

javascripthtmlangularjs

Utilizing Ajax to send IP addresses and obtain location data

Is there a website or webpage that can be used to input a user's IP address and receive their country or location as plain text? Below is a code snippet demonstrating how I attempted to retrieve the user's IP address: I inserted the following c ...

javascriptajaxlocationip

Blocking server.js in node.js can be achieved by modifying the code to prevent

Challenge Description In my server.js file, I have included a config file. This is how my server.js file looks: Includes some necessary imports Requires config.js -> makes an API call to get the configuration data using promises Starts the ser ...

javascriptnode.jsexpressasync-await

Tips for incorporating a Python script into a online project

I've been working on a Python code that detects faces and eyes using face recognition. When the code runs in PyCharm, it displays a camera window. Now I'm trying to figure out how to integrate this window into a webpage project written in HTML, C ...

javascriptpythonhtmlcss

Compiling Ngx translate ahead of time: Updating translations directly in the live code base

Is it possible to compile my angular application ahead of time (aot) while still being able to dynamically update translations stored in a server database by users? I need to ensure that any changes made to the translations by users can seamlessly integr ...

angularngx-translateangular-aot

Guide to iterating through an object and generating child components in React.js

Struggling with a React.js loop through child component issue as a newcomer to the language. I have an object and want to create child components from its values. Any help would be greatly appreciated. var o = { playerA: { name: 'a', ...

javascriptreactjs

Creating a Select component in React without relying on the Material-UI library involves customizing a dropdown

Is there a way to achieve a material UI style Select component without using the material UI library in my project? I'm interested in moving the label to the top left corner when the Select is focused. export default function App({...props}) { retu ...

javascripthtmlcssmaterial-ui

What causes the InvalidValueError to appear in the 'origin' property when using Angular? Is it necessary to set either a location, placeId, or query to

I have integrated agm core into my angular10 application to display google maps. The code in component.html is as follows: <agm-map [latitude]="latitude" [longitude]="longitude"> <agm-direction *ngIf="source && ...

angularagm-direction

Moving data from the bottom of the page to the top

I am facing a situation where I have several foreach loops on a page that calculate the sum of variables. By the end of these loops, a specific variable contains data. However, I now need to display this data at the top of my page before the foreach loop. ...

javascriptphp

What is the best way to access an error's body in order to retrieve additional error message details when using the forge-api with nodejs?

I'm struggling to retrieve the body content when an error is returned from the API request. I've attempted creating a bucket with uppercase letters, but all I receive is an error object with statusCode = "400" and statusMessage = "BAD REQUEST". ...

javascriptnode.jsautodesk-forge