Change the value of a cell in a table dynamically with the use of Angular

Question

Change the value of a cell in a table dynamically with the use of Angular

I am currently developing a web application using Angular 6. Within the HTML template, I have included some code that showcases a specific part of an array within a table cell. It's worth noting that the table is constructed using div elements.

<div class='table_small'>
        <div class='table_cell'>Status</div>
        <div class='table_cell'>
          <p class="status" >{{incomingData.status}}</p>
        </div>
      </div>

One specific scenario that I am trying to address involves including a button within each table row that allows users to cancel a particular order. When the user clicks on this button, a pop-up or modal will prompt them for confirmation. If they select 'Yes', the status field value will temporarily change to "cancellation is in process" before being sent to the service. Once a successful response is received, the status will be updated to "cancelled".

I'm uncertain about the best way to implement this cancellation feature within the table cell. Any guidance or insights on how to achieve this would be greatly appreciated.

Thank you!

html css angular6

Answer 1

Answer №1

If you pass the element to a function and update its status, here's how it can be done:

<div class='table_small'>
    <div class='table_cell'>Status</div>
    <div class='table_cell'>
      <p class="status" >{{incomingData.status}}</p>
    </div>
    <div class='table_cell'>
      <button (click)="showCancelModal(incomingData)"> Cancel</p>
    </div>
  </div>

To implement this in the component, consider following this structure:

showCancelModal(incomingData) {
  // logic for displaying modal and obtaining user response
  if(response === 'yes') {
    incomingData.status = 'Cancellation in progress';
    yourService.cancel(incomingData)
    .pipe( finally(() => incomingData.status = 'Cancelled') )
     .subscribe();
  }
}

Answer 2

If you pass the element to a function and update its status, here's how it can be done:

<div class='table_small'>
    <div class='table_cell'>Status</div>
    <div class='table_cell'>
      <p class="status" >{{incomingData.status}}</p>
    </div>
    <div class='table_cell'>
      <button (click)="showCancelModal(incomingData)"> Cancel</p>
    </div>
  </div>

To implement this in the component, consider following this structure:

showCancelModal(incomingData) {
  // logic for displaying modal and obtaining user response
  if(response === 'yes') {
    incomingData.status = 'Cancellation in progress';
    yourService.cancel(incomingData)
    .pipe( finally(() => incomingData.status = 'Cancelled') )
     .subscribe();
  }
}

Change the value of a cell in a table dynamically with the use of Angular

Answer №1

Similar questions

Keeping a sidebar's height consistent with a responsive square in Bootstrap 4

How can one address the issue of undefined data within table cells?

Accessing Django static files is proving to be difficult

Ajaxed div disappears and reappears only after the div has finished loading

Using conditional CSS in React/Next.js

Determining the position of p5.js input in relation to the canvas

create a function that automatically assigns colors to table fields based on their values

An issue with Destination-Out Composition in HTML5 Canvas

Enhancing the appearance of a PHP HTML email

Tips for preventing menu flickering caused by overflow during CSS animations

How can you quickly check an element's visual properties following a CSS modification?

Need help adding key:value pairs to a JavaScript dictionary? Here's how!

Step-by-step guide on utilizing jQuery to fade out all elements except the one that is selected

Particular arrangement of a table

A comprehensive guide on connecting an HTML Label to a sqldatareader

How to efficiently center a jQuery Mobile Dialog on the screen using custom dimensions

Assistance is required to navigate my character within the canvas

Submitting form by clicking a link on the page

Clear function of signature pad not working inside Bootstrap modal dialogue box

Switch the designation to Hover Class