Identify and monitor changes in every element within an array using Typescript/Angular 2

I am working with a person array that I have displayed in a Primeng datatable. Each object in the array has fields for first name, last name, and age, which are represented as columns in the table. Additionally, there is a column to display the status of each object, indicating if any changes have been made (either "Object Change" or "Not Change").

https://i.sstatic.net/S31fR.jpg

<p-dataTable [value]="persons" [editable]="true"  resizableColumns="true" reorderableColumns="true"> 
    <p-column header="Status">
      <ng-template pTemplate="body">
         <span [hidden]=true>Object Change</span>
       <span >Not Change</span>
      </ng-template>
    </p-column>
    <p-column field="firstName" header="First Name" [editable]="true"></p-column>
    <p-column field="lastName" header="Last Name" [editable]="true"></p-column>
    <p-column field="age" header="Age" [editable]="true">
      <ng-template let-col let-car="rowData" pTemplate="editor">
        <select class="form-control" [(ngModel)]="car[col.field]">
          <option [value]=12>12</option>
          <option [value]=14>14</option>
          <option [value]=23>23</option>
        </select>
      </ng-template>
    </p-column>
</p-dataTable>


<p>{{persons | json}}</p>

The columns in the datatable are editable to allow users to modify the data. Now, I am looking for a way to detect if any changes have been made to an object in the array. If there are changes, I want the status column to indicate "Object change". This condition should be checked for each row/object in the array. I have created a Plunker example for reference: http://plnkr.co/edit/x8Sdgz?p=preview

Answer №1

One potential fix involves substituting

[(ngModel)]="car[col.field]"

with

[ngModel]="car[col.field]" (ngModelChange)="onCarChange($event)"

which allows for the integration of custom logic as needed.

Answer №2

I have the ability to identify modifications in the field. To capture every alteration in any field, you must apply the identical pattern (ng-template) to each column within the data table.

Best wishes

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

Angular navigation did not work as expected

Created a basic webpage using Angular CLI version 8.3. The issue is as follows: For example: www.domainname.com is working fine. www.domainname.com/basicprinciples will work if visited through the main page, but it does not work when directly visiting w ...

What is the best method to completely uninstall Apollo-Angular along with all of its dependencies?

Once I added apollo-angular and @apollo/client to my project, I quickly realized that I no longer needed them. However, simply using "npm uninstall apollo-angular" and "npm uninstall @apollo/client" only removed the main folders but left behind other Apoll ...

Emit Observables within deeply nested callback functions

Hey there! I'm currently working on a web app using Angular2/4 and I've encountered an issue with Observables. My goal is to call a function within a component and then have some code executed once that function completes. Here's the releva ...

Destructuring an object in the find method using TypeScript

I'm running into an issue with object destructuring: Property 'name' does not exist on type 'ItemType | undefined'.ts(2339) App.tsx import "./styles.css"; type ItemType = { id: number; name: string; }; export defaul ...

I am currently leveraging Angular 17, but I have yet to enable Vite. Can anyone guide me on

Despite having the most recent version of NX and Angular, my app has not yet integrated Vite. I've come across online suggestions on how to enable it, but none of them make sense to me because my project doesn't have an angular.json file. Instead ...

Tips for efficiently utilizing mapActions in vue with Typescript class components!

Can someone please provide guidance on the correct way to use ...mapActions([]) within a Typescript vue class component? This is my current approach: <script lang="ts"> import { Component, Prop, Vue } from "vue-property-decorator"; import { mapActi ...

Incorporate external JavaScript files into a cutting-edge Ionic 5 / Angular 9 project

I need assistance in incorporating jQuery functions into my Ionic 5/Angular 9 project. In order to access some of the functions, I have included the necessary files in the angular.json file and installed Jquery and Bootstrap through npm. However, I am un ...

Working with undefined covariance in TypeScript

Despite enabling strict, strictNullChecks, and strictFunctionTypes in TypeScript, the following code remains error-free. It seems that TypeScript is not catching the issue, even though it appears to be incorrectly typed. abstract class A { // You can p ...

What is causing the ESLint error when trying to use an async function that returns a Promise?

In my Next.js application, I have defined an async function with Promise return and used it as an event handler for an HTML anchor element. However, when I try to run my code, ESLint throws the following error: "Promise-returning function provided t ...

Trouble Loading TypeScript Class in Cast Situation

I've encountered an issue with my TypeScript model while using it in a cast. The model does not load properly when the application is running, preventing me from accessing any functions within it. Model export class DataIDElement extends HTMLElement ...

Please ensure that the Angular Input field only allows for numbers to be entered, with the exception that the

My input should only allow numbers, with the exception of the first digit being zero. I have attempted to use regex in this directive, but it is not functioning as expected. import { Directive ,ElementRef, HostListener} from '@angular/core'; @Di ...

Visibility of text compromised when placing transparent button inside input field

After adding a clear button inside the input box in Angular, I am facing an issue where the text in the input box is being overlapped and not fully visible. Below you will find detailed information on this problem. HTML Code <ng-template pTemplate=&quo ...

"Sending the selected pass selector as a parameter to the dispatched action is causing a typing

When a selector changes its value, I want to trigger an action. To achieve this, I passed the selector with a subscription instead of passing an observable. selectedSchedulingsOnPopup$ = this.store.pipe(select(selectSchedulingsByBranch)); this.store.disp ...

I'm attempting to retrieve mlab data in the console using node.js, but unfortunately encountering an error

I came across this helpful YouTube tutorial:https://www.youtube.com/watch?v=PFP0oXNNveg&t=460s. I followed the steps outlined in the video and made necessary code adjustments based on current updates found through a Google search (to resolve errors enc ...

Is it possible to insert a button into a specific column of an ngx-datatable within an Angular 8 application?

I am having trouble with this particular HTML code. <ngx-datatable-column name="Option" prop="option" [draggable]="false" [resizeable]="false [width]="250"> <span> <button class="optionButton" type="button" data-to ...

"Is it possible to add an entire object to formData in one

I am looking to send both an image list and product data to an ASP.net api using formData. I have successfully sent the images, but now I am struggling with appending the entire object. I have come across some methods in JS like JSON.stringfy(object) or Ob ...

Angulating Service Testing

I am encountering an issue that I'm not sure how to resolve because I am inexperienced when it comes to testing. Currently, I am testing a service that includes the following code: import { Injectable } from '@angular/core'; import { Endpo ...

Issue encountered when attempting to install dialog-polyfill for IE11 in Angular2

Currently, I am facing issues with getting dialogs to function properly on Internet Explorer 11. It seems that in order to make it work, I need to install a polyfill. However, my attempts to install the polyfill using npm have resulted in numerous errors t ...

Unexpected error arises in Typescript despite code functioning properly

As part of a practice project where I'm focusing on using webpack, ES6, npm and Typescript implementation, I have successfully set up loaders for 'awesome-typescript-loader' and 'babel-loader', which are bundling the code properly. ...

A better choice than Java's <? super SomeType> in Typescript

Is there a scenario in which one of the generic parameters used to create an instance of my class should be a superclass of another class? In Java, this is easily achievable using <? super SomeType>. What would be the equivalent in TypeScript? ...